css中按钮是怎么做的

CSS中的按钮是网页设计中极其重要的一部分，通过CSS可以轻松实现各种不同样式的按钮，提高页面的交互性和美观性。

首先，HTML中需要创建一个按钮的元素，比如说使用button标签创建一个简单的按钮：

 <button>按钮</button> 

接下来，就可以利用CSS来设置按钮的样式。按钮的样式主要由以下几部分组成：

1. 背景色和边框：可以通过background和border属性来设置按钮的背景色和边框样式。

 button {
        background: #008CBA;
        border: 2px solid #008CBA;
        color: #fff;
        padding: 8px 16px;
    } 

2. 鼠标悬停和点击样式：可以通过:hover和:active伪类来设置当鼠标悬停和点击时按钮的样式。

 button:hover {
        background: #005f7b;
        border-color: #005f7b;
    }
    
    button:active {
        background: #004d60;
        border-color: #004d60;
    } 

3. 文字样式：可以通过color、font-size和font-family等属性来设置按钮内文字的样式。

 button {
        background: #008CBA;
        border: 2px solid #008CBA;
        color: #fff;
        font-size: 16px;
        font-family: sans-serif;
        padding: 8px 16px;
    } 

4. 圆角和阴影效果：可以通过border-radius和box-shadow属性来设置按钮的圆角和阴影效果。

 button {
        background: #008CBA;
        border: 2px solid #008CBA;
        color: #fff;
        font-size: 16px;
        font-family: sans-serif;
        padding: 8px 16px;
        border-radius: 4px;
        box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    } 

通过以上几个方面的调整，我们就可以轻松定制出一个漂亮的按钮啦！