使用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 相关文章推荐
CSS3美化表单控件全集
Jun 29 HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 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
谈谈PHP语法(3)
2006/10/09 PHP
php实现rc4加密算法代码
2012/04/25 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
Python线程的两种编程方式
2015/04/14 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python随机读取文件实现实例
2017/05/25 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
经管应届生求职信
2013/11/17 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
导游的职业规划书范文
2013/12/27 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers