你的位置:首页 > 网页设计

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