使用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中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 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 jsonp单引号转义
2014/11/23 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
python实现剪切功能
2019/01/23 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
植物选择:Botanic Choice
2017/02/15 全球购物
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
PHP面试题及答案二
2015/05/23 面试题
感谢师恩主题班会
2015/08/17 职场文书
新入职员工工作总结
2015/10/15 职场文书
科级干部培训心得体会
2016/01/06 职场文书
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server