【发布时间】：2020-08-26 03:23:18
【问题描述】：
我目前正在为我的网站试验一个按钮。我希望它看起来像一个普通的按钮，但是一旦你将它悬停，它就会变成一根骨头（我的网站是关于狗的）。
所以我使用了一个已经存在的 codepen 项目，我最终得到了这个：
: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>如您所见，我已经能够使用::before 和::after 元素在按钮右侧创建骨骼形状。
但是，既然我想对左侧做同样的事情，我真的不能这样做，因为我已经使用了::before 和::after。
在按钮的左侧有没有做同样的事情？
【问题讨论】：
标签： html css svg css-transitions