CSS3按钮的最佳实践包括以下几点:
<button>
元素创建按钮,而不是使用<a>
或<div>
元素。这有助于提高代码的可读性和可访问性。以下是一个简单的CSS3按钮示例:
<button class="btn">Click me</button>
.btn {
font-size: 16px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #0056b3;
}
在这个示例中,我们创建了一个具有基本样式的按钮,并使用CSS3过渡效果为其添加了鼠标悬停效果。当然,这只是一个简单的示例,你可以根据自己的需求进行扩展和自定义。