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 ...
随机推荐
- md5加密--32位16进制小写
public class ttgameMd5 { public final static String MD5(String str) { char hexDigits[] = { // 用来将字节转 ...
- mysql数据库去除重复数据
(一)最原始的方法: delete from test where id not in (select * from ((select min(id) from test group by(name) ...
- LVS+Keepalived(DR模式)学习笔记
1.简述 在互联网的中型项目中,单服务器往往已经无法满足业务本身的性能要求,这时候就会平行扩展,把负载分摊到数台服务器上(集群).一般实现集群有DNS轮询,LVS,nginx负载均衡. 集群主要目的包 ...
- 嵌入式驱动开发之sensor---sensor 图形传感器调试
图像传感器(image sensor)复位顺序 1. 硬件复位寄存器:2. 软件复位寄存器:3. 设置时钟寄存器:4. 设置PLL倍频:5. 设置分辨率:6. 设置窗口控制:7. 设置输出顺序:8. ...
- Dijkstra 算法——计算有权最短路径（边有权值）
[0]README 0.1) 本文总结于 数据结构与算法分析, 源代码均为原创, 旨在理解 Dijkstra 的思想并用源代码加以实现: 0.2)最短路径算法的基础知识,参见 http://blog. ...
- iOS 递归锁
原理:递归锁也是通过 pthread_mutex_lock 函数来实现,在函数内部会判断锁的类型.NSRecursiveLock 与 NSLock 的区别在于内部封装的 pthread_mutex_t ...
- jQuery Easy UI Draggable(拖动)组件
上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...
- 记CBS一次动人心魄的数据保卫战
接触分布式存储已经有一年多的时间了,首次遇到存储侧三份数据都有异常的情况,三份数据异常意味着客户数据的丢失,这个对云存储来讲是致命的打击.为了保证数据的安全,CBS运维和开发的同学进行了持续两天一夜的 ...
- 经过两个多月的攻关，终于搞定了live555多线程并稳定压测通过
live555已经发展了十几年了,不得不钦佩作者坚持不懈的奉献和国外的开源生态环境,live555可以说是大部分的安防从业者的入门之选,尤其是在嵌入式或者Linux系统上,其应用还是蛮广泛的,主要是其 ...
- 记录-阿里云Oss文件上传
public class OssUtil { /** * 上传图片 * @param file * @param request * @return */ public static Map<S ...