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 ...
随机推荐
- WPF的TextBox抛出InvalidOperationException异常：Cannot close undo unit because no opened unit exists.
近期遇到一个问题.应用使用过程中突然崩溃,查看dump发现异常信息例如以下: UI dispatcher has encountered a problem: 无法关闭撤消单元.由于不存在已打开的单元 ...
- pycharm下： conda installation is not found ----一个公开的bug的解决方案
pycharm conda installation is not found ----一个公开的bug的解决方案 pycharm+anaconda 是当前的主流的搭建方案,但是常出现上述问题. ...
- android 常用方法总结
public class Toolkit { /** * * Role:Telecom service providers获取手机服务商信息 <BR> * * 需要加入权限<uses ...
- 小白学习HTTPS
如果你和我一样是HTTPS的小白的话,那就一起来学习这个吧.争取把这篇博客写好,写全面,从原理到实践再到部署. 让我们先来模拟一个场景:当你嗨皮地敲着代码,你的老板偷偷摸摸跑到你的身边,"小 ...
- ansible的异步执行
ansible任务的异步执行 96 茶客furu声 关注 2016.07.12 01:40* 字数 458 阅读 1777评论 0喜欢 4 ansible方便在于能批量下发,并返回结果和呈现.简单.高 ...
- 【JMeter4.0学习（四）】之JMeter对JMS性能测试脚本开发
目录: 安装ActiveMQ并启动服务 JMeter对JMS点到点测试计划 JMeter JMS主题测试计划 附:相关学习地址 一.ActiveMQ官方下载地址:http://activemq.apa ...
- justify-content 定义子元素在父元素水平位置排列的顺序
justify-content 定义子元素在父元素水平位置排列的顺序,需要和display:flex使用才会生效. 有五个属性: 1.flex-start(默认值) 左对齐 2.flex-end 右 ...
- 2017年Android百大框架排行榜（转）
一.榜单介绍 排行榜包括四大类: 单一框架:仅提供路由.网络层.UI层.通信层或其他单一功能的框架 混合开发框架:提供开发hybrid app.h5与webview结合能力.web app能力的框架 ...
- linux VI模式下批量修改文件内容
1. :s/vivian/sky/ 替换当前行第一个 vivian 为 sky :s/vivian/sky/g 替换当前行所有 vivian 为 sky 2. ...
- windows上mysql安装
1. 下载MySQL Community Server 5.7.14 Index of /MySQL/Downloads/MySQL-Cluster-7.1 2. 解压MySQL压缩包 安装路径:E: ...