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. ZOJ 2771

      Description Considering a light entering three adjacent planes of glass. At any meeting surface, t ...

  2. 通过IP地址屏蔽各种“推广”

    事情的起因是这样的:最近老是发现iPhone应用的底部出现各种横条广告,一开始以为是Google的广告推广,所以没管它,但是最近这些广告越来越猖狂,里面的内容越来越垃圾.今天仔细一看,原来不是Goog ...

  3. springboot+dubbo

    使用springboot搭建dubbo服务,首先封装出springboot-dubbo的项目,引入在服务上加直接@Service直接使用,方便于拆封统一管理. package hello.dubbo. ...

  4. Xamarin Android 绑定jar库同时将so库打包进去

    1.在创建的Bindings Library项目中,新建Assets目录: 2.Assets目录下再分别创建armeabi,armeabi-v7a,x86三个目录: 3.将so文件分布copy到三个目 ...

  5. 一起来做chrome扩展《可配置的代理》

    一.本文主要涉及相关内容: chrome.proxy pacScript browser_action popup localStroage 二.预览 (代理运行截图,图中的代理服务器有防火墙,暂不对 ...

  6. java基础总结——基础语法2(语句)

    1.1.       判断语句(if语句) 1.1.1. If语句的三种格式: 1.1.2. if语句特点: 每一种格式都是单条语句(单条不是单行,单条是一个整体). 第二种格式与三元运算符的区别:三 ...

  7. 响应链和UIKit框架

    Event Delivery: The Responder Chain When you design your app, it’s likely that you want to respond t ...

  8. couldn't find setter for xxxxx

    springmvc hibernate框架,在执行普通的插入操作时报错,仔细检查实体类文件,确认该属性的getter setter方法都是有的,哭哭(´;︵;`)jpa策略生成的当然有.可是老是报这个 ...

  9. sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO

    sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO 今天在弄一个 sqlalchemy 的数据库基类的时候,遇到了跟多继承相关的一个小问题,因此顺便看了一 ...

  10. python Gunicorn

    1. 简介 Gunicorn(Green Unicorn)是给Unix用的WSGI HTTP 服务器,它与不同的web框架是非常兼容的.易安装.轻.速度快. 2. 示例代码1 def app(envi ...