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




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


[-]
Schnellantwort
Nachricht
Geben Sie hier Ihre Antwort zum Beitrag ein.

 

Gehe zu:


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