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
Let's keep it simple! You can add a span
inside your a
tag and with that having new pseudo elements available to do the left part of the bone
:root {
--bg: #1a1e24;
--color: #eee;
--font: Montserrat, Roboto, Helvetica, Arial, sans-serif;
}
.bone {
filter: url('#goo');
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::before,
.bone::after,
.bone span::before,
.bone span::after {
content: "";
width: 2em;
height: 2em;
position: absolute;
display: inline-block;
background: var(--color);
border-radius: 50%;
transition: transform 1s ease;
transform: scale(0);
z-index: -1;
}
/*top*/
.bone::before,
.bone span::before {
top: 50%;
}
/*bottom*/
.bone::after,
.bone span::after {
bottom: 50%;
}
/*right*/
.bone::before,
.bone::after {
right: -10%;
}
/*left*/
.bone span::before,
.bone span::after {
left: -10%;
}
.bone:hover::before,
.bone:hover::after,
.bone:hover span::before,
.bone:hover span::after {
transform: none;
}
/* Demo styles */
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg)
}
Woof woof