使用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弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
css3图片边框border-image的用法
Jun 30 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 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
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
layui自定义工具栏的方法
2019/09/19 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
python GUI实例学习
2017/11/21 Python
python matplotlib画图实例代码分享
2017/12/27 Python
python使用RNN实现文本分类
2018/05/24 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
铭立家具面试题
2012/12/06 面试题
售房协议书
2014/08/19 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2016大一新生军训感言
2015/12/08 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
Python中time标准库的使用教程
2022/04/13 Python