利用:before和:after伪类制作CSS3 圆形按钮 - jerrylsxu_H5之家

预览截图:

制作步骤:

一, <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 type="text/css" href="css/button.css" /> <script type="text/javascript"> /*这里采用淡入效果试试*/ $(function(){ $(".bt").css("opacity","1");}); </script> </head>

二, <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; } .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,制作结束。是不是简单得让人抬不起精神呢? 赶紧动手试试吧。再次申明演示地址到文章的开始处已经给出了哦，找找看啊。