下面是代码。我正在尝试将按钮悬停颜色更改为透明。div class=“button_container”而button class=“btn”
我最初改变了颜色,但它不起作用,我会感谢任何可以扔给我的帮助。
提前谢谢
我知道这主要是我发布的代码,但我搞不懂。我相信这里关于Stack overflow的知识渊博的社区可以帮助我解决这个问题。干杯
.button_container {
position: absolute;
left: 0;
right: 0;
top: 30%;
}
.description, .link {
font-family: 'Amatic SC', cursive;
text-align: center;
}
.description {
font-size: 35px;
}
.btn {
line-height: 1;
border-radius: 5px;
align-items: center;
align-content: space-around;
z-index: 2;
height: 48px;
width: 200px;
border: none;
display: flex;
text-align: -webkit-left;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #ffffff;
font-weight: 600;
font-size: 0.95rem;
background-image: linear-gradient(90deg,#70AECD 0%,#022350 100%);
padding: 1rem 1rem 1rem 3.99rem;
margin: -10px auto;
box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
.btn span {
position: relative;
z-index: 1;
}
.btn:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2.25rem;
height: 100%;
border-right: 1px solid #000000;
padding:119px;
}
.btn:before {
content: url(https://.com/wp-content/uploads/2021/06/.png);
position: absolute;
top: 0%;
left: -11.25rem;
width: 0rem;
height: 73%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.btn:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 858%;
width:347%;
background: #ffae25;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(37deg);
transform: translateX(-98%) translateY(-25%) rotate(47deg);
}
.btn:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(47deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
.link {
font-size: 20px;
margin-top: 30px;
}
.link a {
color: #000;
font-size: 25px;
}