CSS3按钮效果制作
CSS3按钮效果制作
首先附上效果图，按下去有一种下沉的效果，
未按效果
按下去效果
原理：第一个按钮相对比较简单，就直接是一个双重阴影效果，然后鼠标按下去让他的margin-top值为-3px，阴影效果减小一点，就会有一种下沉的效果
第二个按钮，相比第一个按钮，多了一个伪类，就是按钮上的一个小圆点，当按钮按下去时，小圆点的内阴影和外阴影的颜色调换一下，外阴影增加一个2px下部阴影，其他的和第一个按钮一样。
<style>
/*初始化样式*/
*{margin: 0;padding: 0;}
.box{padding: 10px;box-sizing: border-box;overflow: hidden;width: 800px;overflow: hidden;margin: auto;height: 50px;}
a{color: #000;font-size: 14px;font-family: 'Open Sans', sans-serif;text-decoration: none;display: inline-block}
/*按钮一*/
.btn1{padding:0 10px 0 10px;
line-height: 30px;
background:orange;
border-radius: 5px;
box-shadow: 0 5px 0 gray,1px 6px 6px gray;
}
.btn1:active{margin-top: 3px;
box-shadow: 0 2px 0 gray,1px 3px 3px gray;
} /*按钮二*/
.btn2{padding:0 10px 0 10px;
line-height: 30px;
background:orange;
border-radius: 5px;
box-shadow: 0 5px 0 gray,1px 6px 6px gray;
position: relative;
}
.btn2:after{
content: '';
position: absolute;
height: 17px;
width: 17px;
border-radius: 50%;
top: 50%;
margin-top: -8.5px;
right: 5px;
box-shadow: inset 0px 1px 0px gray, 0px 1px 0px #fff;
background: #ffc100;
}
.btn2:active::after{
box-shadow: inset 0px 1px 0px #fff, 0px 1px 0px gray,-1px 3px 0 gray;
}
.btn2:active{
margin-top: 3px;
box-shadow: 0 2px 0 gray,1px 3px 3px gray;
}
</style>
<body>
<!--按钮一-->
<div class="box">
<a class="btn1" href="#">Click me!</a>
</div>
<!--按钮二-->
<div class="box">
<a href="#" class="btn2">Click me! </a>
</div>
</body>
CSS3按钮效果制作的更多相关文章
- 10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
- 学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
- 20个漂亮 CSS3 按钮效果及优秀的制作教程
在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验.正如我们都知道的,CSS3在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性.你可以学习这些教程和试验 ...
- CSS3 Drop-Shadows效果制作教程分享
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 Drop-Shadow效果,其实就是大家熟 ...
- CSS3按钮效果
来自codepen,http://codepen.io/PalashSharma20/pen/YWBAgN 知识点:屏幕居中.transform.transition.transition-delay ...
- 那些不错的 [ Html5 + CSS3 + Canvas ] 效果！
apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...
- 基础理解2:CSS3按钮动画
一个Css3按钮效果很好,仔细看了一下发现就是::after,::before然后加上transition,transform等效果实现,主要关注一下几点就能轻松实现: 1.伪类需要position定 ...
- 使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
- 超漂亮的CSS3按钮制作教程分享
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 利用CSS3属性制作按钮,我们只需要用到G ...
随机推荐
- ubuntu环境 rake aborted!
错误: rake aborted! Gem::LoadError: You have already activated rake 10.3.2, but your Gemfile requires ...
- lua学习笔记（四）
表达式 算术操作符 +(加法) -(减法) *(乘法) /(除法) ^(指数) %(取模) -(负号) x%1的结果是x的小数部分,x-x%1是整数部分 关系操作符 ...
- iOS 解决TableView reloadData时cell中图片会闪的问题
tableView调用reloaddata的时候发现有个小问题,每次刷新图片都会抖动闪烁一下,看着很难受,也影响体验.造成这个问题的主要原因是因为刷新时候切换图片导致.要解决这个问题也很好解决,使用S ...
- 将普通用户添加至sudoers列表
编辑/etc/sudoers文件,在尾部添加如下内容: myusername ALL=(ALL) ALL myusername ALL=(ALL) NOPASSWD: ALL 其中需要将红色部分替换成 ...
- Arbitrage - poj 2240 (Bellman-ford)
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17374 Accepted: 7312 Description Ar ...
- JQuery不能加载click事件的问题
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- JSP指令用来设置整个JSP页面相关的属性
JSP 指令 JSP指令用来设置整个JSP页面相关的属性,如网页的编码方式和脚本语言. 语法格式如下: <%@ directive attribute="value" %&g ...
- MoQ(基于.net3.5,c#3.0的mock框架)简单介绍（转）
https://www.cnblogs.com/nuaalfm/archive/2009/11/25/1610755.html
- URAL 1181 Cutting a Painted Polygon【递归+分治】
题目: http://acm.timus.ru/problem.aspx?space=1&num=1181 http://acm.hust.edu.cn/vjudge/contest/view ...
- Linux c编程：I/O多路复用之epoll
前面介绍了select处理,这一章继续介绍另外一种I/O多路服用的机制:epoll.来比较下两种机制的不同点. select: 调用过程如下: (1)使用copy_from_user从用户空间拷贝fd ...