.header {
background-image: url(https://wallbox.ru/resize/640x480/wallpapers/main2/201717/art-ogni-kosmos-zvezdy-uzory-tumannost-rossyp-mercanie.jpg);
height: 100vh;
}
.header__btn {
border: 1px solid #fff;
border-radius: 3px;
padding: 6px 28px;
text-transform: uppercase;
color: #fff;
background-color: transparent;
transition: 0.5s all;
}
.header__btn:hover {
color: transparent;
background-color: #fff;
transition: 0.5s all;
}
<header class="header">
<button class="header__btn">buy</button>
</header>
如何在悬停时使文本透明?也尝试添加颜色:rgba (255, 255, 255, 0);但没有帮助
答案 0 :(得分:-4)
也许是这样的?与:
opcatiy: 0;
.header {
background-image: url(https://wallbox.ru/resize/640x480/wallpapers/main2/201717/art-ogni-kosmos-zvezdy-uzory-tumannost-rossyp-mercanie.jpg);
height: 100vh;
}
.header__btn {
border: 1px solid #fff;
border-radius: 3px;
padding: 6px 28px;
text-transform: uppercase;
color: #fff;
background-color: transparent;
transition: 0.5s all;
}
.header__btn:hover {
opacity: 0;
background-color: #fff;
transition: 0.5s all;
}
<header class="header">
<button class="header__btn">buy</button>
</header>