在网站设计中,按钮是重要的设计元素之一,可以提升用户交互体验。而在CSS中添加按钮也是比较简单的,具体方法如下。首先,我们可以使用button元素来创建一个按钮,例如:<button&a
<button>点击这里</button>
button { background-color: #4CAF50; /* 设置背景颜色 */ border: none; /* 取消边框 */ color: white; /* 设置文字颜色 */ padding: 15px 32px; /* 设置内边距 */ text-align: center; /* 文字居中 */ text-decoration: none; /* 取消下划线 */ display: inline-block; /* 设置显示方式为行块状 */ font-size: 16px; /* 设置字体大小 */ margin: 4px 2px; /* 设置外边距 */ cursor: pointer; /* 鼠标样式为手型 */ }
button:hover { background-color: #008CBA; /* 悬停时设置背景颜色 */ color: white; /* 悬停时设置文字颜色 */ }
<button class="primary">主要按钮</button> <button class="secondary">次要按钮</button>
button.primary { background-color: #4CAF50; /* 设置主要按钮背景颜色 */ color: white; /* 设置主要按钮文字颜色 */ } button.secondary { background-color: #f44336; /* 设置次要按钮背景颜色 */ color: white; /* 设置次要按钮文字颜色 */ }
粉丝
0
关注
0
收藏
0