Some examples

1> Input width animation

Search:

Code

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 input[type=text] {

   width: 100px;

   -webkit-transition: ease-in-out, width .35s ease-in-out;

   transition: ease-in-out,width .35s ease-in-out;

 }

 input[type=text]:focus {

   width: 250px;

 }

 </style>

 </head>

 <body>

 Search: <input type="text" name="search" placeholder="click here">

 </body>

 </html>

2> Shadow Effect

Shadow Button Shadow on Hover

Code

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 .button {

     background-color: #4CAF50; /* Green */

     border: none;

     color: white;

     padding: 15px 32px;

     text-align: center;

     text-decoration: none;

     display: inline-block;

     font-size: 16px;

     margin: 4px 2px;

     cursor: pointer;

     -webkit-transition-duration: 0.4s; /* Safari */

     transition-duration: 0.4s;

 }

 .button1 {

     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

 }

 .button2:hover {

     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

 }

 </style>

 </head>

 <body>

     <button class="button button1">Shadow Button</button>

     <button class="button button2">Shadow on Hover</button>

 </body>

 </html>

3> Button Groups1

Button Button Button Button

Code

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 .button {

     background-color: #4CAF50; /* Green */

     border: none;

     color: white;

     padding: 15px 32px;

     text-align: center;

     text-decoration: none;

     display: inline-block;

     font-size: 16px;

     cursor: pointer;

     float: left;

 }

 .button:hover {

     background-color: #3e8e41;

 }

 </style>

 </head>

 <body>

     <button class="button">Button</button>

     <button class="button">Button</button>

     <button class="button">Button</button>

     <button class="button">Button</button>

 </body>

 </html>

4> Button Groups2

Button Button Button Button

Code

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 .button {

     background-color: #4CAF50; /* Green */

     border: 1px solid green;

     color: white;

     padding: 15px 32px;

     text-align: center;

     text-decoration: none;

     display: inline-block;

     font-size: 16px;

     cursor: pointer;

     float: left;

 }

 .button:hover {

     background-color: #3e8e41;

 }

 </style>

 </head>

 <body>

     <button class="button">Button</button>

     <button class="button">Button</button>

     <button class="button">Button</button>

     <button class="button">Button</button>

 </body>

 </html>

5> Animated Button

Hover

Code

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 .button {

   display: inline-block;

   border-radius: 4px;

   background-color: #f4511e;

   border: none;

   color: #FFFFFF;

   text-align: center;

   font-size: 28px;

   padding: 20px;

   width: 200px;

   transition: all 0.5s;

   cursor: pointer;

   margin: 5px;

 }

 .button span {

   cursor: pointer;

   display: inline-block;

   position: relative;

   transition: 0.5s;

 }

 .button span:after {

   content: '»';

   position: absolute;

   opacity: 0;

   top: 0;

   right: -20px;

   transition: 0.5s;

 }

 .button:hover span {

   padding-right: 25px;

 }

 .button:hover span:after {

   opacity: 1;

   right: 0;

 }

 </style>

 </head>

 <body>

 <button class="button" style="vertical-align:middle"><span>Hover </span></button>

 </body>

 </html>

6> Ripple Effect

Click Me

Code

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 .button {

     position: relative;

     background-color: #4CAF50;

     border: none;

     font-size: 28px;

     color: #FFFFFF;

     padding: 20px;

     width: 200px;

     text-align: center;

     -webkit-transition-duration: 0.4s; /* Safari */

     transition-duration: 0.4s;

     text-decoration: none;

     overflow: hidden;

     cursor: pointer;

 }

 .button:after {

     content: "";

     background: #90EE90;

     display: block;

     position: absolute;

     padding-top: 300%;

     padding-left: 350%;

     margin-left: -20px!important;

     margin-top: -120%;

     opacity: 0;

     transition: all 0.8s

 }

 .button:active:after {

     padding: 0;

     margin: 0;

     opacity: 1;

     transition: 0s

 }

 </style>

 </head>

 <body>

 <button class="button">Click Me</button>

 </body>

 </html>

7> Pressed Effect

Click Me

Code

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 .button {

   display: inline-block;

   padding: 15px 25px;

   font-size: 24px;

   cursor: pointer;

   text-align: center;

   text-decoration: none;

   outline: none;

   color: #fff;

   background-color: #4CAF50;

   border: none;

   border-radius: 15px;

   box-shadow: 0 9px #999;

 }

 .button:hover {background-color: #3e8e41}

 .button:active {

   background-color: #3e8e41;

   box-shadow: 0 5px #666;

   transform: translateY(4px);

 }

 </style>

 </head>

 <body>

 　　　<button class="button">Click Me</button>

 </body>

 </html>

CSS3 笔记五（Buttons）的更多相关文章

  1. C#可扩展编程之MEF学习笔记(五)：MEF高级进阶

    好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...

  2. 《MFC游戏开发》笔记五 定时器和简单动画

    本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9332377 作者:七十一雾央 新浪微博:http:// ...

  3. （转）Qt Model/View 学习笔记 (五)——View 类

    Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...

  4. java之jvm学习笔记五(实践写自己的类装载器)

    java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...

  5. Crazyflie笔记五: CRTP 实时通信协议（一）（转）

    源:Crazyflie笔记五: CRTP 实时通信协议(一) 这里详细介绍了 Crazyflie 的 CRTP实时通信协议的相关内容,由于内容很长,分几篇博文来讲述.这里是第一节内容.欢迎交流:301 ...

  6. Learning ROS for Robotics Programming Second Edition学习笔记(五) indigo computer vision

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  7. Typescript 学习笔记五：类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  8. Django开发笔记五

    Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.页面继承 定义base.html: <!DOC ...

  9. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

随机推荐

  1. get back to the slower clock rate that allows it to save more power

    http://www.howtogeek.com/177790/why-you-cant-use-cpu-clock-speed-to-compare-computer-performance/ Wh ...

  2. bzoj2523 聪明的学生

    bzoj第一题,ctsc2001. 黑书上的递归例题,我们定义time()函数,递归求解即可. 这个题用到了一个小技巧:可以使用枚举来搞算法. #include <iostream> #i ...

  3. Python中的对象类型的初步介绍

    一:介绍 1.为什么使用内置对象 对象类型是语言的一个部分 内置对象构成了每个python程序的核心部分 2.核心数据类型 数字 字符串 列表 字典 元组 文件 集合 其他类型 编程单元类型 与实现相 ...

  4. Object C中Block用法

    先了解定义C语言的函数指针! int sum (int x, int y) { return x+ y; } // 定义函数 int (*p)(int, int) = sum; NSLog(, )); ...

  5. php,session验证码不一致慢半拍

    这种问题遇到过一次,后来忘了怎么解决了,所以做下笔记 输出的$_SESSION['code']之所以比图片慢了‘一帧’,这也纯属正常情况因为输出的图片是一个连接一次调用,而echo $_SESSION ...

  6. [转]Android - 文件读写操作 总结

     转自:http://blog.csdn.net/ztp800201/article/details/7322110 Android - 文件读写操作 总结 分类: Android2012-03-05 ...

  7. Java 多线程之单例设计模式

    转载:https://segmentfault.com/a/1190000007504892 概念: Java中单例模式是一种常见的设计模式,单例模式的写法有好几种,这里主要介绍两种:懒汉式单例.饿汉 ...

  8. 第一篇：白话tornado源码之一个脚本引发的血案

    本系列博文计划: 1.剖析基于Python的Web框架Tornado的源码 2.为Python开发一个完善的MVC框架 首先将带着大家一起来剖析基于python编写的Web框架 tornado ,本着 ...

  9. 《30天自制操作系统》19_day_学习笔记

    harib16a: 这一部分,我们在系统中实现读取文件内容的命令type.在windows中,输入“type 文件名”,在Linux中,输入“cat 文件名”都可以显示文件的内容.我们先来看看如何读取 ...

  10. leetcode Super Pow

    题目描述: superPow(int a, int[] b),b是一个int数组,每个元素都是正的个位数,组合起来表示一个正整数,例如b=[1,2,3]表示123,求解a^b mod 1337. 思路 ...