18.04.2022, 00:32
So kann man den Border um mehrere buttons setzen damit es gleich aussehend und gleichmäßig bleibt
Hier der Link zur Demo **Link entfernt, weil Seite nicht mehr erreichbar **
Klicke auf den Schüttel Button damit die Buttons immer eine neue rein folge bekommen. damit kann man sehen, dass der Border immer gleichmäßig aussieht
Code:
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Border bei Buttons</title>
<meta charset="utf-8">
<style>
body{
text-align:center;
}
#but{
display:inline-block;
margin-top:10%;
}
.butto{
margin-left:-4px;
padding:0;
padding:20px 40px 20px 40px;
}
input:first-child{
border:2px solid red;
}
input:nth-child(2),
input:nth-child(3),
input:nth-child(4),
input:nth-child(5){
border-top:2px solid red;
border-bottom:2px solid red;
border-right:2px solid red;
}
</style>
</head>
<body>
<div id="but" class="buttons">
<input type="button" class="butto" id="bu1" value="Button 1">
<input type="button" class="butto" id="bu2" value="Button 2">
<input type="button" class="butto" id="bu3" value="Button 3">
<input type="button" class="butto" id="bu4" value="Button 4">
<input type="button" class="butto" id="bu5" value="Button 5">
</div>
</body>
</html>Klicke auf den Schüttel Button damit die Buttons immer eine neue rein folge bekommen. damit kann man sehen, dass der Border immer gleichmäßig aussieht