This is the (wrong) code for it:
.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>
The required result ( the image is photoshopped ) :
image
( help me please )
im trying to limit the border on the butttons length to a certain size
3
Answers
You can do this using pseudo elements. Here is the code:
You can use the pseudo element
after
to make this work. Here are the changes i made that you should be weary of:You could set a max width to your button. That would restrict the border only to the width you define.
You can put any value, 20px is just a random value you can adjust according to your own needs.