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 ...
随机推荐
- Sphinx之配置文件
# # Sphinx configuration file sample # # WARNING! While this sample file mentions all available opti ...
- linux recv函数返回值分析
函数原型: ssize_t recv(int sockfd, void *buf, size_t len, int flags); 该函数第一个参数制定接收端套接字描述符; 第二个参数指明一个缓冲区, ...
- 三星DRAM+NAND FLASH 合成MCP芯片介绍及应用攻略
转自:http://blog.csdn.net/gao5528/article/details/6256119 三星DRAM+NAND FLASH 合成MCP芯片介绍及应用攻略(K5系列产品篇) 一年 ...
- linux 进程线程
linux下进程的最大线程数.进程最大数.进程打开的文件数 ＝＝＝＝＝＝＝＝＝＝＝最大线程数＝＝＝＝＝＝＝＝＝＝＝＝＝＝ linux 系统中单个进程的最大线程数有其最大的限制 PTHREAD_TH ...
- JavaWeb学习总结第六篇--认识Session机制
认识Session机制 前文也提到过,常用的会话跟踪有两种技术:Cookie和Session.今天就为大家讲解一下Session机制. 什么是Session? Session是另一种记录客户状态的机制 ...
- chattr
chattr 功能:设置文件隐藏属性常用参数:+ 增加某个特殊权限,其他原本存在的参数不动- 删除某个特殊权限,其他原本存在的参数不动= 设置一定,且仅有后面接的参数 i 文件 ...
- 【Atheros】Ath9k速率调整算法源码走读
上一篇文章介绍了驱动中minstrel_ht速率调整算法,atheros中提供了可选的的两种速率调整算法,分别是ath9k和minstrel,这两个算法分别位于: drivers\net\wirele ...
- iOS_3_图片浏览
终于效果图: BeyondViewController.h // // BeyondViewController.h // 03_图片浏览 // // Created by beyond on 14- ...
- python基础： day4作业计算器
作业:计算器开发 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - ...
- JS获取图片的缩略图,并且动态的加载多张图片
找了好多资料也没有找到该死的ie的解决办法,最后放弃了ie <!DOCTYPE html> <html> <head> <meta charset=" ...