我想在悬停时创建一个过渡效果，类似于这个网站上的大"开始投票"按钮，但是，虽然我熟悉css过渡效果，但我不知道如何创建它。感谢您花时间阅读本文。
您可以使用背景大小转换：
a {
position: relative;
display: inline-block;
padding: 12px 80px;
border: 2px solid #BDAA67;
color: white;
font-size: 30px;
text-decoration: none;
background-color: black;
background-image: linear-gradient(#BDAA67, #BDAA67);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 0%;
transition: background-size .3s, color .3s;
}
a:hover {
background-size: 100% 100%;
color: #000;
}<a href="#" class="button">
CLICK ME!
</a>{content: "";
background-color: #bdaa67;
height: 0%;
width: 50%;
position: absolute;
left: 25%;
transition: all .15s ease-in-out;
top: 48%;
z-index: -1;}
试试这个
将以下代码行添加到HTML、中
<button class="custom-btn">Start now</button>
在custom.css中添加以下代码行。这将在悬停时为按钮提供确切的样式。如果你愿意使用引导程序，你可以尽量减少代码。在这里，我们从头开始自定义按钮的样式。
.custom-btn {
font-size: 25px;
padding: 32px 105px;
text-shadow: none;
border: 2px solid #000;
background: #000;
color: #fff;
font-weight: bold;
text-transform: uppercase;
position: relative;
z-index: 1;
transition: all .33s ease-in-out;
}
.custom-btn:hover {
border: 2px solid #bdaa67;
color: #000;
}
.custom-btn::before {
content: "";
background-color: #bdaa67;
height: 0%;
width: 50%;
position: absolute;
left: 25%;
transition: all .15s ease-in-out;
top: 48%;
z-index: -1;
}
.custom-btn:hover::before {
height: 100%;
width: 100%;
left: 0;
top: 0;
}
<body>
<button> START VOTING </button>
</body>
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: red;
}
button {
position: absolute;
padding: 40px 120px;
font-weight: bold;
border: 0;
color: #fff;
font-size: 2em;
text-transform: uppercase;
background: #000;
z-index: 1;
}
button::before {
content:"";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #bdaa67;
transform: scale(0);
transition: 0.3s;
z-index: -1;
}
button:hover:before {
transform: scale(1);
}
button:hover {
border: 3px solid #bdaa67;
color: #000;
}