Result
角についた印がマウスホバーで伸びてくる、というアニメーションエフェクトです。
css
.btn {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #fff;
font-weight: 700;
font-size: 15px;
background-color: #222;
padding: 17px 60px;
margin: 0 auto;
}
.btn span {
position: relative;
z-index: 1;
}
.btn:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #78c7d2;
transition: all .5s ease-in-out;
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn:hover:after {
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
|
html
<div class="button_container">
<button class="btn"><span>Hover me!</span></button>
</div>
|
via
CSS button hover effect
