HTML代码
<!doctype html>
<head>
<title>hover按钮过渡效果</title>
</head>
<body>
<a href="#" id="example">登 录</a>
</body>
CSS代码
#example {
text-align: center;
color: White;
background: #4490f7;
text-decoration: none;
padding: 10px 95px;
border-radius: 5px;
opacity: 0.6; //主要代码
transition: opacity 1s; //主要代码
}
#example:hover {
opacity: 1; //主要代码
/* transition-property: opacity;
transition-duration: 1.5s; */
}
实现原理：先将按钮的透明度设为0.6（opacity: 0.6;），鼠标划过时（hover），按钮的透明度变为1（opacity: 1;）。transition: opacity 1s;控制过渡属性为透明度（opacity），持续1s。
动图演示：
Demo链接：http://129.204.144.144/Demo/hover%E6%8C%89%E9%92%AE%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9C.html