Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Border um mehrer Buttons
#1
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
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste