我目前正在为我的网站试验一个按钮。我希望它看起来像一个普通的按钮,但是一旦你将它悬停,它就会变成一个骨头(我的网站是关于狗的)。
所以我使用了一个已经存在的 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: …Run Code Online (Sandbox Code Playgroud)