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 ...
随机推荐
- java使用命令wsimport构建WebService客户端
wsimport -d d: -keep -extension -p com.demo.client http://192.168.33.3//RECEPTIONws.ASMX?WSDL 客户端:在J ...
- PHP性能之语言性能优化：vld——查看代码opcode的神器
vld介绍 vld是PECL(PHP 扩展和应用仓库)的一个PHP扩展,现在最新版本是 0.14.0(2016-12-18),它的作用是:显示转储PHP脚本(opcode)的内部表示(来自PECL的v ...
- window 杀死已开任务启命令
1. 查询已开启的端口号 C:\Users\Administrator>netstat -ano | findstr 如果被占用会查询出相关信息,如果没有被占用则不会输出任何信息,查询到已开启信 ...
- java 性能检测工具 检测死锁等
死锁检测方法 1 JConsole 找到需要查看的进程,打开线程选项卡,点击检测死锁 2 jps查看java进程ID,使用jstack 7412输出信息 3 使用jvisualvm连接java虚拟机 ...
- 基于react-native android的新闻app的开发
使用平台:android 代码获取地址:https://github.com/wuwanyu/ReactNative-Android-MovieDemo 项目展示: 结构图: SpalashScree ...
- Linux 服务器上建立用户并分配权限
查看用户 whoami #要查看当前登录用户的用户名 who am i #表示打开当前伪终端的用户的用户名 who mom likes who 命令其它常用参数 参数 说明 -a 打印能打印的全部 - ...
- 【BZOJ4894】天赋 有向图生成树计数
[BZOJ4894]天赋 Description 小明有许多潜在的天赋,他希望学习这些天赋来变得更强.正如许多游戏中一样,小明也有n种潜在的天赋,但有一些天赋必须是要有前置天赋才能够学习得到的.也就是 ...
- hdu 5969 最大的位或
最大的位或 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- socket编程python+c
python版: server: def socket_loop_server_function(): HOST = '192.168.56.1' PORT = 21567 sk = socket.s ...
- Android动画效果animation
1.Tween 根据指定动画开始和结束时的对象属性(位置.Alpha值(透明度).大小.角度等)以及动画播放的时间长度生成动画: 2.Frame 指定每一帧所播放的图片和时间长度. 建立动画的方法 ...