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. 解决FTP的URL访问不能有中文名称的问题，报java.lang.IllegalArgumentException

    最近一个项目要用到FTP做上传下载,我访问ftp的url中有中文名称,结果每次都报如下错: 1 Exception in thread "main" java.lang.Illeg ...

  2. 微信 {"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}

    {"errcode":,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]&q ...

  3. JAVA（IO流）文件复制

    package com.am; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOEx ...

  4. 合同主体列表添加两条合同主体,返回合并支付页面,支付总弹"请选择合同主体",删除后,竟然还能支付(改合并支付页面的字段状态)

    bug描述: 操作步骤:1.进入"商标续展"产品详情页面,点击立即购买(数量设为2),进入合并订单界面,选择合同主体,点击全部,清空所有合同主体2.新建合同主体保存,设置该合同主体 ...

  5. IOS 绘图教程Quartz2D

    http://www.cocoachina.com/industry/20140115/7703.html http://www.cnblogs.com/wendingding/p/3803020.h ...

  6. IDEA +maven+ ContextLoaderListener not find

    tomcat 启动失败:SEVERE: Context [] startup failed due to previous errors 查看pox.xml 有spring-web依赖 查看tomca ...

  7. Swift 语法篇

    一.输出语句 print("Hello World") print("Hello World 11", "Hello World 22", ...

  8. JavaScript之ES6

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  9. c语言中的副作用！！千万小心！

    今天刚看完书上的副作用,博主觉得呢,副作用其实就在改变变量的值,也就是一个赋值操作!不过刚刚在知道上还是犯了错!!尴尬啊!! 大家都知道,c语言中的赋值操作符是自右向左结合的!! 下面有一个关于赋值中 ...

  10. LINUX端口查看

    e切依燃   LINUX端口查看 查看文件数 ls | wc -w lsof -i:80