使用before和:after伪类制作css3圆形按钮


Posted in HTML / CSS onApril 08, 2014

使用before和:after伪类制作css3圆形按钮

制作步骤:

一, <head>标签结构

下面代码中使用了CSS3无前缀脚本prefixfree.js,可以省去CSS3中前缀“-moz”、“-webkit”、“-o”、“-ms”

复制代码
代码如下:

<head>
<meta charset="utf-8">
<title>button</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/prefixfree.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/button.css" />
<script type="text/javascript">
/*这里采用淡入效果试试*/
$(function(){
$(".bt").css("opacity","1");
});
</script>
</head>

二, <body>标签结构

复制代码
代码如下:

<body>
<div class="bt">
<div class="button"></div>
<div class="button2"></div>
<div style="clear:both"> </div>
</div>
</body>

三,CSS代码

复制代码
代码如下:

* {
padding: 0;
margin: 0;
}
/* 清除浮动 */
.clearfix:after {
content: "";
display: table;
clear: both;
}
html, body {
height: 100%;
}
body {
font-family: "Microsoft YaHei";
background: #E1E1E1;
font-weight: 300;
font-size: 15px;
color: #333;
overflow: hidden;
}
a {
text-decoration: none;
}
/*按钮 阴影无扩展 */
.bt {
margin: 100px auto;
display: block;
width: 350px;
opacity:0;
border-bottom: 1px solid #C5C5C5;
border-top: 1px solid #C5C5C5;
box-shadow: 0 1px 0 #F6F6F6, 0 1px 0 #F6F6F6 inset;
transition: all 0.5s ease-in;
}</p> <p>.button:before, .button2:before {
content: "";
width: 130px;
height: 130px;
display: block;
z-index: -1;
position: relative;
background: #ddd;
left: -15px;
top: -15px;
border-radius: 65px;
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}
.button:after, .button2:after {
content: "注册";
color: #09F;
font-size: 20px;
width: 100%;
height: 100%;
line-height: 100px;
text-align: center;
position: absolute;
top: 0;
display: block;
}
.button2:after {
content: "登入";
word-spacing: 25px;
color: #A0D989;
}
.button, .button2 {
float: left;
margin: 50px auto;
cursor: pointer;
height: 100px;
width: 100px;
display: block;
position: relative;
color: black;
text-align: center;
line-height: 100px;
border-radius: 50px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
background: #FFF;
transition: all 0.5s ease-in;
}
.button {
float: left;
}
.button2 {
float: right;
}

OK,制作结束。是不是简单得让人抬不起精神呢? 赶紧动手试试吧。再次申明演示地址到文章的开始处已经给出了哦,找找看啊。

下面给大家分享几个在线制作CSS3按钮的网站吧:

1,Live Tools是一个在线UI制作工具,他提供了按钮、表单、icon图标和Ribbons的制作工具,可以在线配置相关参数,生成你需要的效果代码。

2,CSS3 Button Generator是一款简单的按钮生成工具,他可以制作出两种状态下的按钮效果,当然你如果需要其他状态的下按钮效果,要在其基础上做一些参数的变化,相对来说麻烦一点。

3,Button Generator生成和图片效果一样的按钮工具。
4,Webarti CSS3 Button Maker是一款非常强大的按钮在线生成工具,他提供了很多种不同按钮效果让你参考,可以说只需选择就能制作出自己需要的按钮,思考的时间都不用你花了。

HTML / CSS 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 #HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 #HTML / CSS
CSS3网格的三个新特性详解
Apr 04 #HTML / CSS
CSS类名支持中文命名的示例
Apr 04 #HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 #HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 #HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 #HTML / CSS
You might like
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
js 图片轮播(5张图片)
2008/12/30 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
python编写暴力破解FTP密码小工具
2014/11/19 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
用matplotlib画等高线图详解
2017/12/14 Python
python K近邻算法的kd树实现
2018/09/06 Python
Django框架安装方法图文详解
2019/11/04 Python
python中图像通道分离与合并实例
2020/01/17 Python
Python实现对adb命令封装
2020/03/06 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
文职个人求职信范文
2013/09/23 职场文书
欢迎家长标语
2014/10/08 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android