HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>CSS3 Button</title>
</head>
<body>
<button class="my-button">Click me</button>
</body>
</html>
CSS (styles.css)：
/* 基本样式 */
.my-button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
cursor: pointer;
border: none;
border-radius: 5px;
color: #fff;
}
/* 默认背景色和边框 */
.my-button {
background-color: #3498db;
border: 2px solid #3498db;
}
/* 鼠标悬停时的样式 */
.my-button:hover {
background-color: #2980b9;
border: 2px solid #2980b9;
}
/* 按下按钮时的样式 */
.my-button:active {
background-color: #21618c;
border: 2px solid #21618c;
}
这个例子创建了一个简单的蓝色按钮，并添加了悬停和按下时的样式。你可以根据需要修改颜色、大小、字体等样式来定制按钮的外观。这只是一个基本的示例，实际上你可以根据设计需求进行更加复杂和独特的样式设计。
转载请注明出处：http://www.zyzy.cn/article/detail/12571/CSS