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工程拆分成一个个功能相对独立但相互依赖的小 ...

随机推荐

使用mutt+msmtp在Linux命令行界面下发邮件（续）
一年前写过一篇<使用mutt+msmtp在Linux命令行界面下发邮件>,但是最近想照着文中的办法解决新的问题时发现又有新的疑惑了,所以就有了今天这篇“续集”. 首先说说msmtp.如果你 ...
JAVA入门
编译型语言:高级语言代码经过编译器,一次性翻译为特定系统可以硬件执行的机器码,并包装成该平台所识别的可执行程序. 但是不同平台(系统)的机器码不同,所以编译后的可执行程序无法移植到其他平台.但是因为是 ...
SYMMETRIC MULTIPROCESSORS
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION As demands for perfor ...
【转】监听按钮除OnClick外其他事件的方法，附简易改编的UIButton类
http://lib.csdn.net/article/unity3d/38463 作者:IceFantasyLcj 大家好,我是雨中祈雨.一直以来,CSDN都是我最好的编程助手.这是我在CSDN的第 ...
ThinkCmfX模板常量
一.public文件: 1.各种js文件,包括cookie.js.ajaxFrom.js等系统自带的js文件 2.simpleboot:bootstrap.图标font文件二.themes:前端模板 ...
django学习笔记
django笔记----建立疾病预测系统的web应用 @buyizhiyou 工作环境:ubuntu16.04LTS+ ...
java 基础一
一.Java命名规则 Java命名规则有两种,第一种匈牙利命名要求望名知意,第二种驼峰命名要求首字母大写(关键单词) 类名必须首字母大写,方法名首字母小写后面的单词首字母大写 .类名和方法名要用英文开 ...
angularjs 动态加载事件的另一种实现
/** 初始化酒店列表 */ function inintHotel(params,url,$http,$scope){ $http.jsonp(url).success(function(res, ...
使用js实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
CentOS7.2 编译安装SVN1.9.5客户端
背景原来想在Linux机上开Samba共享,在Windows机上把工作目录映射到网络驱动器,用Source Insight编辑代码后就不用来回同步文件了. 然而在使用中发现,Windows机用的SV ...

CSS3 笔记五（Buttons）

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

随机推荐

热门专题