通过css相关属性来制作一个button

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

前面我们介绍了如何写一个分页功能，

传送门：前端必会的，CSS的分页功能以及了解面包屑导航

今天我们来通过css相关属性来制作一个button：

首先，讲一下可能用到的一些css属性，如下：

1. 使用 background-color 属性来设置按钮颜色，注意：background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色
2. 使用 font-size 属性来设置按钮大小
3. 使用 border-radius 属性来设置圆角按钮，注意它是一个复合属性
4. 使用 border 属性设置按钮边框颜色等
5. 使用 :hover 选择器来修改鼠标悬停在按钮上的样式
6. 使用 transition-duration 属性来设置 "hover" 效果的速度
7. 使用 box-shadow 属性来为按钮添加阴影
8. 使用 opacity 属性为按钮添加透明度 (看起来类似"disabled" 属性效果)
9. 使用 cursor 属性规定要显示的光标的类型（形状)，值有很多，也可以设置为"not-allowed" 来设置一个禁用按钮
10. 使用 width 属性来设置按钮的宽度
11. 使用float:left 来设置按钮组，需要注意：如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄
12. 使用：hover或：active来实现按钮动画

这里实现一个简单的按钮，代码如下：

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

我们可以使用一个div，给它添加以上这个class类即可，于是就会出现一个按钮的样子了。

以上就是本文的相关内容了，欢迎点赞，关注和收藏哦~