数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会研究
时尚研究
法律研究如何使用 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;
}
按钮悬停
当鼠标光标悬停在按钮上时，背景和文本颜色将会更改。:hover 选择器用于实现此目的 −
.blockBtn:hover {
background-color: rgb(132, 161, 255);
color: black;
}
网页上的全宽按钮
以下是使用 CSS 创建块按钮的代码 −
示例
<!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;
}
示例
让我们看下示例 −
<!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+ 查看
广告