html中button的立体效果圆角，已收藏
在HTML中，要创建一个具有立体效果的圆角按钮，你可以使用CSS来实现。以下是一个简单的例子，展示了如何使用CSS为button元素添加立体效果和圆角样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Button Example</title>
<style>
.button {
background-color: #4CAF50; /* Green background */
border: none;
color: white; /* White text */
padding: 10px 20px; /* Some padding */
text-align: center; /* Center the text */
text-decoration: none; /* Remove underline */
display: inline-block; /* Display as block */
font-size: 16px; /* Set a font-size */
margin: 4px 2px; /* Add margin */
cursor: pointer; /* Add a pointer on hover */
border-radius: 10px; /* Rounded corners */
transition: box-shadow 0.3s, transform 0.3s; /* Animation */
}
.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">Click Me</button>
</body>
</html>这段代码中的.button类定义了按钮的基本样式，包括背景颜色、文本颜色、边距、圆角半径等。:hover伪类则定义了当鼠标悬停在按钮上时发生的变化，包括添加阴影和改变位置，从而创建了立体效果。
评论已关闭