[分享]css写一个按钮

在网页设计中，按钮是一个非常重要的元素，它可以让用户进行交互操作，完成各种动作。在CSS中，我们可以非常简单地通过代码创建一个漂亮的按钮。/ CSS代码 / .btn{ backgroundcolor...

在网页设计中，按钮是一个非常重要的元素，它可以让用户进行交互操作，完成各种动作。在CSS中，我们可以非常简单地通过代码创建一个漂亮的按钮。

/* CSS代码 */
.btn{
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
}

/* 鼠标悬停样式 */
.btn:hover{
    background-color: #2980b9;
}

/* 鼠标点击样式 */
.btn:active{
    background-color: #1abc9c;
} 

以上代码中，我们通过.btn选择器选中了所有按钮，设置了按钮的背景色、文字颜色、内边距、圆角和边框。这里我们去掉了边框，让按钮看起来更加简单美观。

接下来，我们通过:hover和:active伪类为按钮设置悬停和点击样式，让用户感受到与按钮的交互。

/* HTML代码 */
<button class="btn">点击我</button> 

最后，我们只需要在HTML中使用button元素，并添加btn类名，就可以轻松创建一个漂亮的按钮了。