使用transition做的一个超级超级简单的按钮特效
<div>
<input type=button value=Login>
<input type=button value=Reset>
</div>
<style>
* {
margin: 0;
padding: 0;
background-color: black;
}
div {
width: auto;
margin: auto;
padding-top: 200px;
}
input {
display: block;
width: 200px;
height: 40px;
margin: auto;
outline: none;
background-color: #74b9ff;
border: 1px solid #74b9ff;
color: white;
font-size: 1.5rem;
border-radius: 20px;
transition: all 500ms;
margin-top: 30px;
}
input:hover {
width: 220px;
height: 50px;
border-radius: 30px;
box-shadow: 0 0 15px #81ecec;
border: 1px solid #81ecec;
text-shadow: 5px 2px 10px white;
background-color: #81ecec;
transition-delay: 100ms;
transition-duration: 500ms;
}
</style>
声明:
本文采用
BY-NC-SA
协议进行授权,如无注明均为原创,转载请注明转自
N0tssss' Note
本文地址: 简单的CSS+HTML按钮特效
本文地址: 简单的CSS+HTML按钮特效