Codepad Button Hover Effect
HTML
<a href="https://codepad.co/">
<img src="https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0">
</a>
CSS
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
body {
background: #222;
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 #fff;
height: 5em;
width: 14em;
padding: 0;
outline: none;
overflow: hidden;
color: #63bfdb;
transition: color 0.3s 0.1s ease-out;
text-align: center;
}
a img {
width: 80px;
margin-top: 18px;
}
a::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
content: '';
border-radius: 50%;
display: block;
width: 20em;
height: 20em;
line-height: 20em;
left: -3em;
text-align: center;
transition: box-shadow 0.5s ease-out;
z-index: -1;
}
a:hover {
color: #fff;
border-color: #63bfdb;
}
a:hover::before {
box-shadow: inset 0 0 0 10em #63bfdb;
}
