<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="style/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<button class="btn btn-1 btn-1a">Button</button>
<button class="btn btn-1 btn-1b">Button</button>
<button class="btn btn-1 btn-1c">Button</button>
<button class="btn btn-1 btn-1d">Button</button>
<button class="btn btn-1 btn-1e">Button</button>
<button class="btn btn-1 btn-1f">Button</button>
<button class="btn btn-2 btn-2g">Button</button>
</body>
</html>
<style>
body{background: #aaa}
.btn{
padding:25px 80px;
transition: all .3s ease;
background: none;
cursor: pointer;
color:#fff;
display: inline-block;
margin: 15px 30px;
position: relative;
outline: none;
border: none;
}
.btn:after{
content:'';
position: absolute;
transition: all .3s ease;
z-index: -1;
}
.btn:before{
content: '';
position: relative;
transition: all .3s ease;
}
.btn-1 {
border: 3px solid #fff;
color: #fff;
}
.btn-1a:hover{
background: #fff;
color:blue;
}
.btn-1b:after{
content: '';
width: 100%;
height: 0%;
background: #000;
left: 0;
top:0;
}
.btn-1b:hover:after{
height: 100%;
}
.btn-1c:after{
content: '';
width: 0%;
height: 100%;
background: #000;
left: 0;
top:0;
}
.btn-1c:hover:after{
width: 100%;
}
.btn-1d{overflow: hidden;}
.btn-1d:after{
content: '';
width: 0%;
height: 105%;
background: #000;
transform: translate(-50%,-50%);
left: 50%;
top:50%;
opacity: 0;
}
.btn-1d:hover:after{
width: 90%;
opacity: 1;
}
.btn-1d:active:after{
width: 100%;
}
.btn-1e{overflow: hidden;}
.btn-1e:after{
content: '';
height: 200%;
width: 0;
background: #000;
left: 50%;
top:50%;
transform: translate(-50%,-50%) rotate(-45deg);
opacity: 0.1;
}
.btn-1e:hover:after{
width: 200%;
opacity: 1;
}
.btn-1e:active:after{
height: 300%;
}
.btn-2 {
background: #cb4e4e;
color: #fff;
box-shadow: 0 6px #ab3c3c;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.btn-2g{
border-radius: 40px;
}
.btn-2g:hover{
box-shadow: 0px 4px #ab3c3c;
top:2px;
}
.btn-2g:active{
box-shadow: 0px 0px;
top:6px;
}
</style>
自己尝试实现了几个效果,总结下制作方法(如在不同浏览器下看不到效果请在css3属性上加上个浏览器的前缀):
1:设置按钮的transition属性,做统一的过渡效果,包括按钮的:before,:after的过渡属性。
2:设定不同变化效果。例如高度的变化,阴影的变化,top的属性。
3:必须要设置:before,:after的content属性,即使设置为空。
4::after的z-index须设置层级在按钮下。
参考地址:http://www.jiawin.com/demos/creative-button-styles/index.html