问题描述
我目前正在尝试一个用于我网站的按钮.我希望它看起来像一个普通的按钮,但是一旦将其悬停,它就会变成骨头(我的网站是关于狗的).
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).
所以我使用了一个已经存在的codepen项目,最终我得到了这个结果:
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>
如您所见,通过使用 :: before
和 :: after
元素,我已经能够在按钮的右侧创建骨骼形状.
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.
但是,现在我想对左侧做同样的事情,因为我已经使用了 :: before
和 :: after 代码>.
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?
推荐答案
让我们保持简单吧!您可以在 a
标记内添加 span
,并在其中添加新的伪元素来做骨骼的左侧部分
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)
}
<a class="bone" href="#">
<span>Woof woof</span>
</a>
<!-- 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>
这篇关于如何制作骨头状的纽扣的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!