Run ❯
Get your
own
website
Result Size:
625 x 565
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!Doctype html> <html> <style> .btn-group button { background-color: #04AA6D; /* Green background */ border: 1px solid green; /* Green border */ color: white; /* White text */ padding: 10px 24px; /* Some padding */ cursor: pointer; /* Pointer/hand icon */ float: left; /* Float the buttons side by side */ } /* Clear floats (clearfix hack) */ .btn-group:after { content: ""; clear: both; display: table; } .btn-group button:not(:last-child) { border-right: none; /* Prevent double borders */ } /* Add a background color on hover */ .btn-group button:hover { background-color: #3e8e41; } </style> <body> <h1>Justified Button Group</h1> <p>Two buttons in a group:</p> <div class="btn-group" style="width:100%"> <button style="width:50%">Apple</button> <button style="width:50%">Sony</button> </div> <p>Three buttons in a group:</p> <div class="btn-group" style="width:100%"> <button style="width:33.3%">Apple</button> <button style="width:33.3%">Samsung</button> <button style="width:33.3%">Sony</button> </div> <p>Four buttons in a group:</p> <div class="btn-group" style="width:100%"> <button style="width:25%">Apple</button> <button style="width:25%">Samsung</button> <button style="width:25%">Sony</button> <button style="width:25%">HTC</button> </div> </body> </html>