看了下面网站的按钮效果，想自己也试试。
http://tympanus.net/Development/CreativeLinkEffects/
按照上面网站的效果实现。
1.左右两侧出现边框的效果。相见代码如下：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../css/config.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<a href="#" class="button">
home
</a>
<a href="#" class="button"> project </a>
</body>
</html>
less代码：
@charset "UTF-8";
html,body{
margin:0px;
padding: 0px;
height: 100%;
}
//伪类before after的联系
.button{
display: inline-block;
padding:10px 20px 10px 20px;
position: relative;
cursor: pointer;
&::before,&::after{
display: inline-block;
opacity: 0;
.button-transion();
}
&::before{
content: "[";
.button-translate(10px);
}
&::after{
content: "]";
.button-translate(-10px);
}
&:hover::before{
.button-translate(0px);
opacity: 1;
}
&:hover::after{
.button-translate(0px);
opacity: 1;
}
.button-transion{
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.button-translate(@c){
-moz-transform:translate(@c,0);
-webkit-transform:translate(@c,0);
-o-transform: translate(@c,0);
transform:translate(@c,0);
}
}
2.鼠标移动上移文字效果
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3 动画按钮 demo3</title>
<link rel="stylesheet" href="../css/config.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div style="margin:20px">
<a href="#" class="button3" >
<span text="home">home</span>
</a>
<a href="#" class="button3">
<span text="project">project</span>
</a>
</div>
</body>
</html>
less代码：
//伪类before after的联系
.button3{
color:#000;
text-decoration: none;
margin:5px 10px 5px 10px;
display: inline-block;
overflow: hidden;
height: 30px;
line-height: 30px;
span{
display: block;
.common-transion(all,0.3s,linear,0s);
}
span::after{
content: attr(text);
display: block;
font-weight: bold;
}
&:hover{
span{
.trasform-translate(0px,-50%);
}
}
}
3.鼠标移动出现下划线动画
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3 动画按钮 demo2</title>
<link rel="stylesheet" href="../css/config.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div style="margin:20px">
<a href="#" class="button2"> home </a>
<a href="#" class="button2"> project </a>
</div>
</body>
</html>
css代码：
//伪类before after的联系
.button2{
color:#000;
text-decoration: none;
margin:5px 10px 5px 10px;
padding:10px;
display: inline-block;
&::after{
height:2px;
100%;
background: #000;
display: block;
content: "";
opacity: 0;
.trasform-translate(0px,10px);
.common-transion(all,0.3s,linear,0s);
}
&:hover::after{
opacity: 1;
.trasform-translate(0px,5px);
}
}