Javascript-forum
Border um mehrer Buttons - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Css (https://javascript-forum.de/forumdisplay.php?fid=7)
+--- Thema: Border um mehrer Buttons (/showthread.php?tid=462)



Border um mehrer Buttons - admin - 18.04.2022

So kann man den Border um mehrere buttons setzen damit es gleich aussehend und gleichmäßig bleibt




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>
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