<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Button Hover Animation</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
*,*:before,*:after{
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
body{
background: #222;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Noto Sans', sans-serif;
}
a {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-decoration: none;
cursor: pointer;
border: 1px solid #ee3709;
border-radius: 8px;
height: 3rem;
width: 10rem;
padding: 0;
outline: none;
overflow: hidden;
color:#ee3769;
transition: color 0.3s 0.1s ease-out;
text-align: center;
line-height: 250%;
}
a::before {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
content: " ";
border-radius: 50%;
display: block;
width: 20rem;
height: 20rem;
line-height: 20rem;
left:-5rem;
text-align: center;
transition: box-shadow 0.5s ease-out;
z-index: -1;
}
a:hover {
color: #fff;
}
a:hover::before {
box-shadow:inset 0 0 0 10em #ee3769;
}
</style>
<a>
<i class="fa fa-dribbble"></i>
Dribbble
</a>
</body>
</html>
Css3 button hover effect
最新推荐文章于 2021-12-27 08:42:00 发布