这是它的(错误)代码:
.btn-group .button {
background-color: #fffff1;
border: 0px solid black;
border-radius: 8px;
border-bottom: 1px solid black;
color: #3c4043;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 150px;
display: block;
}
.button1 {
border-bottom: 1px solid black;
}
.btn-group .button:not(:last-child) {
}
.btn-group .button:hover {
background-color: #fffff1;
box-shadow: 0 0px 4px 0 rgba(0,0,0,0.24), 0 0px 32px 0 rgba(0,0,0,0.19);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="btn-group">
<button class="button button1">Button</button>
<button class="button button2">Button</button>
<button class="button button3">Button</button>
<button class="button button4">Button</button>
</div>
</body>
</html>
所需的结果(图像经过Photoshop处理):图像(请帮帮我)
我试图将按钮长度上的边框限制为特定大小
您可以使用伪元素after
来完成这项工作。以下是我所做的您应该厌倦的更改:
.button {
background-color: salmon /* so you can see the changes easier */
position: relative /* this is so we can anchor the :after element */
}
.button:after {
content: "";
background: black;
/* so we can adjust the position of the border bottom */
position: absolute;
/* bottom: 0 is to put it at the bottom*/
bottom: 0;
/* left: 5% is to center it */
left: 5%;
height: 1px;
width: 90%;
}
.btn-group .button {
/* background-color: #fffff1; */
background-color: salmon;
border: none;
border-radius: 8px;
color: #3c4043;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 150px;
display: block;
position: relative;
}
.btn-group .button:after {
content: "";
background: black;
position: absolute;
bottom: 0;
left: 5%;
height: 1px;
width: 90%;
}
.btn-group .button:hover {
background-color: #fffff1;
box-shadow: 0 0px 4px 0 rgba(0,0,0,0.24), 0 0px 32px 0 rgba(0,0,0,0.19);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="btn-group">
<button class="button button1">Button</button>
<button class="button button2">Button</button>
<button class="button button3">Button</button>
<button class="button button4">Button</button>
</div>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句