[分享]css制作有厚度的按钮

在网页设计中，按钮是很常见的元素之一。而如果要制作一个有厚度的按钮，我们可以通过 CSS 实现。下面我们来看一下如何制作有厚度的按钮。.button { display: inlineblock; p...

在网页设计中，按钮是很常见的元素之一。而如果要制作一个有厚度的按钮，我们可以通过 CSS 实现。下面我们来看一下如何制作有厚度的按钮。

.button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #b81d1d;
  color: #fff;
  text-align: center;
  border: 2px solid #b81d1d;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
}

.button:hover {
  background-color: #fff;
  color: #b81d1d;
} 

首先，我们定义一个名为 .button 的 class 作为我们要制作的按钮。我们设置按钮的 display 属性为 inline-block，这样可以使按钮保持在一行。我们设置 padding 属性为 12px 24px，可以控制按钮内部的空间大小 。我们设置 background-color 属性为 #b81d1d，表示按钮的背景颜色为深红色。我们设置 color 属性为 #fff，表示按钮的文字颜色为白色。我们设置 text-align 属性为 center，表示按钮中的文本居中。接下来，我们设置 border 属性为 2px solid #b81d1d，表示按钮的边框为 2px 粗的深红色实线。最后，我们设置 box-shadow 属性为 0px 10px 10px rgba(0,0,0,0.2)，表示按钮有一个浅色的阴影效果。

接下来，我们再定义一个名为 .button:hover 的 class，这个 class 的作用是当鼠标放在按钮上时，按钮的背景颜色和文字颜色分别变成白色和深红色。我们设置 background-color 属性为 #fff，表示按钮的背景颜色为白色。我们设置 color 属性为 #b81d1d，表示按钮的文字颜色为深红色。

以上就是制作有厚度的按钮的 CSS 代码了。我们可以在 HTML 中调用这个 class 来制作按钮：

<button class="button">点击我</button> 

最终效果如下：

点击我