如何使用 CSS 为块按钮（全宽）设置样式？

要在网页上设置全宽按钮，请将按钮的宽度设置为 100%。使用 text-align 属性进一步设置按钮样式，以使按钮上的文本居中。使用 padding 属性将文本正确放置在按钮中。padding 属性可同时在元素的四边设置填充区域。让我们看看如何使用 CSS 设置块按钮样式，即全宽。

设置按钮

使用 <button> 元素并在网页上设置按钮 −

<button class="blockBtn">Block Button</button>

按钮宽度

使用宽度属性并将其值设置为 100%，设置按钮样式并设置按钮宽度。cursor 属性设置为值指针，以使按钮看起来可点击。由于按钮扩展到全宽，因此应使用 text-align 属性将其值设置为 center，将文本置于中央。display 属性设置为 block 值 −

.blockBtn {
   display: block;
   width: 100%;
   border: none;
   background-color: rgb(19, 0, 105);
   color: white;
   padding: 14px 28px;
   font-size: 36px;
   cursor: pointer;
   text-align: center;
   font-weight: bold;
}

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

按钮悬停

当鼠标光标悬停在按钮上时，背景和文本颜色将会更改。:hover 选择器用于实现此目的 −

.blockBtn:hover {
   background-color: rgb(132, 161, 255);
   color: black;
}

网页上的全宽按钮

以下是使用 CSS 创建块按钮的代码 −

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .blockBtn {
         display: block;
         width: 100%;
         border: none;
         background-color: rgb(19, 0, 105);
         color: white;
         padding: 14px 28px;
         font-size: 36px;
         cursor: pointer;
         text-align: center;
         font-weight: bold;
      }
      .blockBtn:hover {
         background-color: rgb(132, 161, 255);
         color: black;
      }
   </style>
</head>
<body>
   <h1 style="text-align: center;">Block Button Example</h1>
   <button class="blockBtn">Block Button</button>
</body>
</html>

卡片上的全宽按钮

此处创建产品卡片并在其上设置按钮。由于宽度设置为 100% −，因此按钮覆盖了整个卡片

button {
   width: 100%;
   border: none;
   outline: 0;
   display: inline-block;
   padding: 8px;
   color: white;
   background-color: rgb(23, 31, 102);
   text-align: center;
   cursor: pointer;
   font-size: 18px;
}

示例

让我们看下示例 −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .productCard {
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
         max-width: 300px;
         margin: auto;
         text-align: center;
         font-family: arial;
         background-color: rgb(190, 224, 224);
      }
      .productDetails {
         color: rgb(26, 0, 51);
         font-weight: bold;
         font-size: 18px;
      }
      button {
         border: none;
         outline: 0;
         display: inline-block;
         padding: 8px;
         color: white;
         background-color: rgb(23, 31, 102);
         text-align: center;
         cursor: pointer;
         width: 100%;
         font-size: 18px;
      }
      button:hover, a:hover {
         opacity: 0.7;
      }
   </style>
</head>
<body>
   <h2 style="text-align:center">Product Card Example</h2>
   <div class="productCard">
      <img src="https://images.pexels.com/photos/1152077/pexels-photo-1152077.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" style="width:100%"/>
      <h1>Leather Bag</h1>
      <p class="productDetails">Exotic Quality</p>
      <p>Price 50$</p>
      <p><button>Buy Now</button></p>
   </div>
</body>
</html>

更新日期：21-12-2023

1K+ 查看

助力你的事业

通过完成课程来获得认证

开始
广告