我在按钮上添加了悬停效果。这个想法是当有人将鼠标悬停在按钮上时，使按钮背景透明(以缓和效果(。问题是我不能使它透明。。。
由于方向的原因，我用了轻松。
我的代码；
<div class="container">
<button class="btn-1">Get in Touch</button>
</div>
CSS；
.container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.btn-1{
width: 300px;
height: 100px;
border: none;
color: white;
background-color: rgb(25, 62, 148);
border-radius: 4px;
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
transition: ease-in 0.3s;
font-size: 2rem;
outline: none;
}
.btn-1:hover{
box-shadow: inset 300px 0 0 0 rgba(0, 0, 0, 0);
}
transition属性接受在触发事件中需要更改的property-name作为其第一个参数。为了更好地理解，代码已经更新，并添加了注释。
我在示例中添加了all，这意味着它将为所有正在更改的属性添加转换。这里需要注意的一点是，转换仅适用于定量的属性，即可以作为度量的属性。
.container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.btn-1{
width: 300px;
height: 100px;
border: none;
color: white;
background-color: rgb(25, 62, 148);
border-radius: 4px;
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
transition: all ease-in 0.3s; /* We need to define the property for which we want the transition. Here I have used 'all' that applies to all the properties. You can use a specific property name as well. (eg background-color)*/
font-size: 2rem;
outline: none;
}
.btn-1:hover{
background-color: rgb(25, 6, 18); /* We need to update the property that we want the changes to. */
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="container">
<button class="btn-1">Get in Touch</button>
</div>
</body>
</html>属性要求转换该属性。