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学习笔记&lt;五&gt; Module的操作——import、export、as

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

随机推荐

  1. ActiveX(四) mshtml 命名空间 重要接口简介

    在上一篇随笔 ActiveX(三)ActiveX 调用 Js 中,我们已经可以获得js中window对象的强类型接口.即 mshtml.IHTMLWindow2 ,通过该接口.我们可以调用js函数.那 ...

  2. [转]h5页面测试总结

    转自http://www.blogjava.net/qileilove/archive/2014/07/24/416154.html?utm_source=tuicool H5页面测试总结 其实经过几 ...

  3. hdoj 2084 数塔

    数塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  4. Servlet中的过滤器Filter详解

    加载执行顺序 context-param->listener->filter->servlet web.xml中元素执行的顺序listener->filter->stru ...

  5. 二进制安装 kubernetes 1.12(二) - 安装docker, 部署Flannel网络

    在 node 节点上安装 docker 参考 https://www.cnblogs.com/klvchen/p/8468855.html Flannel 工作原理: 部署Flannel网络 在 ma ...

  6. SAP Parallel Accounting(平行分类账)业务配置及操作手册

    目录 SAP Parallel Accounting(平行分类账业务)配置及操作手册 SAP Parallel Accounting(平行分类账业务)配置及操作手册 Overview 业务说明 为了适 ...

  7. Requests 校花网图片爬取

    纪念我们闹过的矛盾,只想平淡如水 import requestsimport reurl = 'http://www.xiaohuar.com/list-1-%s.html'for i in rang ...

  8. 两条线段求交点+叉积求面积 poj 1408

    题目链接:https://vjudge.net/problem/POJ-1408 题目是叫我们求出所有四边形里最大的那个的面积. 思路:因为这里只给了我们正方形四条边上的点,所以我们要先计算横竖线段两 ...

  9. 使用nginx统一代理dashboard,grafana,Prometheus二级目录访问

    k8s上的这些管理工具必不可少,可以统一在nginx下的二级目录下. ingress是好,但我们不方便使用内部域名,相信么...:) 一,prometheus改造 在prometheus的deploy ...

  10. 关于Struts2的文件下载

    首先先来说下关于文件下载的原理: 服务端为客户端提供了一个下载服务,所以服务端需要一个输出流(把客户请求下载的文件输出),相对于服务端来说,客户端需要下载接收一个文件,所以它需要一个输入流(接收文件) ...