HTML5+CSS3小实例：按钮悬浮效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover Effect</title>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
/* 添加圆角 */
border-radius: 28px;
/* 添加阴影 */
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
/* 过渡效果 */
transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.button:hover {
/* 悬浮时阴影变化 */
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
/* 悬浮时变化 */
transform: translateY(-5px);
}
</style>
</head>
<body>
<button class="button">Hover Over Me!</button>
</body>
</html>这段代码展示了如何使用HTML和CSS创建一个具有悬浮效果的按钮。按钮在鼠标悬浮时，会有轻微的上移效果，并且增加了阴影效果，增强了按钮的立体感和交互感。
评论已关闭