I am currently experimenting on a button for my website. I want it to look like an average button but, once you hover it, it becomes a bone (my website is about dogs).
S
:root {
--bg: #1a1e24;
--color: #eee;
--font: Montserrat, Roboto, Helvetica, Arial, sans-serif;
}
.wrapper {
padding: 1.5rem 0;
filter: url('#goo');
}
.bone {
display: inline-block;
text-align: center;
background: var(--color);
color: var(--bg);
font-weight: bold;
padding: 1em 1em 1.03em;
line-height: 1;
border-radius: 0.4em;
position: relative;
min-width: 8.23em;
text-decoration: none;
font-family: var(--font);
font-size: 1.25rem;
}
.bone-left {
position: absolute;
top: 30px;
right: -15px;
}
.bone-right {
position: absolute;
top: 30px;
left: 15px;
}
.bone .bone-left:before,
.bone .bone-left:after,
.bone .bone-right:before,
.bone .bone-right:after {
width: 2em;
height: 2em;
position: absolute;
content: "";
display: inline-block;
background: var(--color);
border-radius: 50%;
transition: transform 1s ease;
transform: scale(0);
z-index: -1;
}
.bone .bone-left:before,
.bone .bone-right:before {
top: 50%;
right: -10%;
}
.bone .bone-left:after,
.bone .bone-right:after {
bottom: 50%;
right: -10%;
}
.bone:hover .bone-left:before,
.bone:hover .bone-left:after,
.bone:hover .bone-right:before,
.bone:hover .bone-right:after {
transform: none;
}
/* Demo styles */
body {
width: 100%;
height: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg)
}