我试图让我的按钮在悬停时转换,以便按钮向左挤压。但是,悬停时不会发生过渡。有什么建议吗?
.BtnEvents {
background-color: #048431;
/* FRB Green */
margin: 10px 0px;
padding: 16px 30px;
height: 50px;
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
fit: fill;
display: inline-block;
overflow: visible;
color: white;
font-size: 18px;
font-family: 'Sofia Pro', sans-serif;
line-height: 20px;
text-decoration: none;
position: static;
border: 0;
cursor: pointer;
font-weight: 400px;
}
.BtnEvents:hover {
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
}
<a href="https://www.google.com" target="_blank" class="BtnEvents">Register Now!</a>
答案 0 :(得分:0)
.BtnEvents {
background-color: #048431;
/* FRB Green */
margin: 10px 0px;
padding: 16px 30px;
height: 50px;
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
fit: fill;
display: inline-block;
overflow: visible;
color: white;
font-size: 18px;
font-family: 'Sofia Pro', sans-serif;
line-height: 20px;
text-decoration: none;
border: 0;
cursor: pointer;
font-weight: 400px;
transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
-ms-transition: all 200ms ease;
}
.BtnEvents:hover {
width: 200px;
}
<a href="https://www.google.com" target="_blank" class="BtnEvents">Register Now!</a>