<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3按钮效果</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
background-color: #c1ebff;
}
body {
text-align: center;
}
body:before { /*按钮垂直居中*/
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
button {
height: 60px;
padding: 0 2em;
background-color: #1aab8a;
color: #fff;
border: none;
outline: none;
font-size: 1.6em;
cursor: pointer;
position: relative;
transition: all ease 800ms;
}
button:hover {
background-color: #fff;
color: #1aab8a;
}
button:before, button:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 2px;
background-color: #1aab8a;
transition: all ease 400ms;
}
button:after {
top: inherit;
right: inherit;
left: 0;
bottom: 0;
}
button:hover:after, button:hover:before {
width: 100%;
transition: all ease 800ms;
}
</style>
</head>
<body>
<button>Hover me !</button>
</body>
</html>
