HTML CSS3美化网页元素
<!DOCTYPE html>
<html>
<head>
<style>
/* 定义一个圆形的按钮，并为其添加阴影效果 */
.round-button {
background-color: #4CAF50; /* 设置按钮背景颜色 */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%; /* 将按钮设为圆形 */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* 添加阴影效果 */
transition: box-shadow 0.3s, transform 0.3s; /* 添加过渡效果 */
}
.round-button:hover {
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 15px 40px 0 rgba(0, 0, 0, 0.19); /* 鼠标悬浮时更大的阴影 */
transform: translateY(-5px); /* 鼠标悬浮时向上移动按钮 */
}
</style>
</head>
<body>
<button class="round-button">按钮</button>
</body>
</html>这段代码定义了一个圆形按钮，并为其添加了阴影和过渡效果。按钮在鼠标悬浮时，阴影会变大并且按钮会上移。这种效果提升了用户体验，使得按钮更加引人注目。
评论已关闭