按钮不缩放使用：：后
按钮不缩放使用：：后
提问于 2022-09-23 02:14:25
我想在.btn下面创建另一个按钮，这样我的按钮就可以缩放，并且我可以应用更多的属性到它。我的问题是，我创建的按钮不在下面。相反，它就在它旁边。
.btn:link,
btn:visited {
text-transform: uppercase;
text-decoration: none;
display: inline-block;
border-radius: 100px;
transition: all 0.2s;
position: relative;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0px 10px 30px #00000020;
}
.btn:active {
transform: translateY(-1px);
box-shadow: 0px 5px 10px #00000020;
}
.btn-white {
background-color: #fff;
color: #777;
padding: 15px 40px;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 100%;
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
}
.btn-white::after {
background-color: red;
}
.btn:hover::after {
transform: scale(2);
}<header class="header">
<div class="logo-box">
<img src="img/logo-white.png" alt="Logo" class="logo" />
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
<a href="#" class="btn btn-white">Discover our tours</a>
</div>
</header>
回答 1
Stack Overflow用户
发布于 2022-09-23 03:03:56
实际上它在它下面。您只需要添加left: 0;
.btn:link,
btn:visited {
text-transform: uppercase;
text-decoration: none;
display: inline-block;
border-radius: 100px;
transition: all 0.2s;
position: relative;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0px 10px 30px #00000020;
}
.btn:active {
transform: translateY(-1px);
box-shadow: 0px 5px 10px #00000020;
}
.btn-white {
background-color: #fff;
color: #777;
padding: 15px 40px;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: -1;
}
.btn-white::after {
background-color: red;
}
.btn:hover::after {
transform: scale(2);
transition: 0.5s;
}<header class="header">
<div class="logo-box"> <img src="img/logo-white.png" alt="Logo" class="logo" /> </div>
<div class="text-box">
<h1 class="heading-primary"> <span class="heading-primary-main">Outdoors</span> <span class="heading-primary-sub">is where life happens</span> </h1> <a href="#" class="btn btn-white">Discover our tours</a> </div>
</header>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73822347
复制相关文章
相似问题
腾讯云开发者
