CSS3 笔记五（Buttons）

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）的更多相关文章

C#可扩展编程之MEF学习笔记(五)：MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...
《MFC游戏开发》笔记五定时器和简单动画
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9332377 作者:七十一雾央新浪微博:http:// ...
（转）Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类概念在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
java之jvm学习笔记五(实践写自己的类装载器)
java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...
Crazyflie笔记五: CRTP 实时通信协议（一）（转）
源:Crazyflie笔记五: CRTP 实时通信协议(一) 这里详细介绍了 Crazyflie 的 CRTP实时通信协议的相关内容,由于内容很长,分几篇博文来讲述.这里是第一节内容.欢迎交流:301 ...
Learning ROS for Robotics Programming Second Edition学习笔记(五) indigo computer vision
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
Typescript 学习笔记五：类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
Django开发笔记五
Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.页面继承定义base.html: <!DOC ...
ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

随机推荐

Git系列教程一入门与简介
一.版本控制引入可能我们都会有这样的经历:创建了一个文件,并对它做了多次更改,当我们想回到其中的某一次更改的时候,由于时间太长记不得那次更改的内容,于是我们在每次大的更改的时候,会创建一个文件的副本 ...
js 小知识
在iframe 页面获取父级页面的 html var obj = window.parent.document.getElementById('modaliframe'); 解决Jquery 的在一个 ...
SSH登录远程主机执行脚本找不到环境变量
这是因为在Linux上,bash会有四种模式,根据不同的case,Linux会加载不同模式的bash.一般如果你自己直接登录主机,能看到环境变量,但是使用ssh 远程登录执行脚本就找不到环境变量,那么 ...
我喜欢ASP.NET的MVC因为它牛逼的9大理由(转载)
我很早就关注ASP.NET的mvc的,因为最开始是学了Java的MVC,由于工作的原因一直在做.Net开发,最近的几个新项目我采用了MVC做了,我个一直都非常喜欢.Net的MVC.我们为什么使用MVC ...
《linux内核设计与实现》读书笔记第十七章
第17章设备与模块四种内核成分设备类型:在所有 Unix 系统中为了统一普通设备的操作所采用的分类．模块: Linux 内核中用于按需加载和卸载目标码的机制．内核对象:内核数据结构中支持面向 ...
C#中异常：“The type initializer to throw an exception（类型初始值设定项引发异常）”的简单分析与解决方法
对于C#中异常:“The type initializer to throw an exception(类型初始值设定项引发异常)”的简单分析,目前本人分析两种情况,如下: 情况一: 借鉴麒麟.NET ...
phyton 相关学习
http://www.nowamagic.net/academy/category/13/ http://www.runoob.com/python/python-reg-expressions.ht ...
简单理解call_user_func和call_user_func_array两个函数
call_user_func():调用一个回调函数处理字符串, 可以用匿名函数,可以用有名函数,可以传递类的方法, 用有名函数时,只需传函数的名称用类的方法时,要传类的名称和方法名传递的第一个参数 ...
C学习笔记知识集锦(一)
1.标识符 2.寄存器变量 3.全局变量 4.分配内存与初始化 5.变量定义与声明 6.作用域规则跳转语句 7.&与&&,|和||的意义与区别 8.如何选择switch c ...
Charles常用的十大功能
转载:http://www.jianshu.com/p/2745dbb97cc2 简介 Charles是在 Mac 下常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的网络通讯协议,常常 ...

CSS3 笔记五（Buttons）

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

随机推荐

热门专题