介绍
HTML按钮是我们日常网页开发中最常用的元素之一。虽然HTML按钮存在很多默认样式，但是使用定制样式可以使我们的网页更加美观和个性化。本文将分享三款美观的HTML按钮样式，这些样式可以为您的网页添加一些很酷的效果。
样式一
设计思路
第一个样式是一款简单而又充满现代感的按钮样式。这种样式使用的颜色非常简单，主要颜色为蓝色和白色，按钮的边框颜色为黑色，此外，为鼠标悬停和按下状态设置了不同的颜色，以使按钮更加动态。
代码
下面是这个样式的代码实现。
<button class="cool-button">Click Me</button>.cool-button {
background-color: #3498db;
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: 50px;
}
.cool-button:hover {
background-color: #3cb0fd;
}
.cool-button:active {
background-color: #2980B9;
}
分析
使用此样式可以轻松创建醒目的按钮。在代码中，颜色设置和padding属性可以设置按钮的大小。cursor属性可以让鼠标在悬停时显示一个手形光标，以增加按钮的可点击性。
样式二
设计思路
第二款样式是一种类似于电灯泡的按钮，其灯泡可以通过点击开启或关闭。灯泡的图标是通过一个实心圆和一个类似于三叶草的三角形组成的。当灯泡处于关闭状态时，圆和三角形均为灰色；当灯泡处于打开状态时，圆为黄色，而三角形为白色。
代码
下面是这个样式的代码实现。
<button class="bulb-button">
<span class="bulb-icon">
<span class="circle"></span>
<span class="triangle"></span>
</span>
<span class="bulb-text">ON</span>
</button>
.bulb-button {
background-color: #fff;
border: none;
color: #999;
padding: 5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 25px;
}
.bulb-icon {
display: inline-block;
height: 30px;
position: relative;
margin-right: 10px;
}
.circle {
border-radius: 10px;
display: inline-block;
height: 20px;
position: absolute;
width: 20px;
top: 5px;
left: 0;
background-color: #ccc;
}
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 17.3px;
border-color: transparent transparent transparent #ccc;
position: absolute;
left: 7px;
top: 5px;
}
.bulb-button.active {
background-color: #ff0;
color: #333;
}
.bulb-button.active .circle {
background-color: #ff0;
}
.bulb-button.active .triangle {
border-color: transparent transparent transparent #ff0;
}
.bulb-button.active .bulb-text {
color: #333;
}
.bulb-text {
font-weight: bold;
}'>
分析
通过此样式，可以使你的网站变得更加有趣。在这个例子中，我们使用了CSS3的伪元素来绘制电灯泡的三叶草形状。使用:active伪类可以轻松地改变按钮的样式。
样式三
设计思路
第三款样式是一款较为简单的阴影按钮。该按钮使用了CSS3的box-shadow来创建细微的阴影效果，使按钮看起来更有层次感。
代码
下面是这个样式的代码实现。
<button class="shadow-button">Click Me</button>.shadow-button {
background-color: #f44336;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50px;
border: none;
-webkit-box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.1);
box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.1);
}
.shadow-button:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.shadow-button:active {
-webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
}
分析
这个样式简单、干净，只是添加了一个阴影效果来增加按钮的视觉效果。box-shadow属性可以用很多不同的方式来调整按钮的外观。
结论
在本文中，我们介绍了三款不同的HTML按钮样式。第一个样式是一种简单而有现代感的按钮；第二个样式是一个像灯泡一样的按钮；第三个样式是一个简单的阴影按钮。每个样式都具有不同的优势和目的，并且可以为您的网站添加不同的视觉效果。通过这些样式，您可以使您的按钮更有创造力和独特性，吸引更多的用户。