<button class="btn">
<span class="background">
Hello World
</span>
</button>
.btn {
width: 100px;
height: 100px;
border: none;
background: transparent;
padding: 0px;
}
.background {
display: flex;
align-items: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: slateblue;
color: white;
font-size: 20px;
font-weight: 500;
line-height: 1;
}
.background {
will-change: transform;
transition: transform 450ms;
}
.btn:hover .background {
transition: transform 150ms;
transform: translateY(-10px);
}
/* Toggle me on for a clue! */
.btn {
outline: auto;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.