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).
So I used an already existing codepen project and I ended up with this:
: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:before,
.bone: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:before {
top: 50%;
right: -10%;
}
.bone:after {
bottom: 50%;
right: -10%;
}
.bone:hover:before,
.bone:hover:after {
transform: none;
}
/* Demo styles */
body {
width: 100%;
height: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg)
}<div class="wrapper">
<a class="bone" href="#">Woof woof</a>
</div>
<!-- Filter: https://css-tricks.com/gooey-effect/ -->
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>As you can see, I have been able to create the bone shape on the right side of the button, by using the ::before and ::after elements.
However, now that I want to do the same for the left side, I can't really do it because I have already used the ::before and ::after.
Is there anyway to do the same on the left side of the button?