Scribd
Upload
27 views3 pages

Button Code

The document contains HTML code for two different button group layouts. The first layout features a vertical button group with styled buttons that change color on hover, while the second layout presents a horizontal button group with inline-block buttons. Both sections include CSS styles for button appearance and behavior.

Uploaded by

abdullahrehan034
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views3 pages

Button Code

The document contains HTML code for two different button group layouts. The first layout features a vertical button group with styled buttons that change color on hover, while the second layout presents a horizontal button group with inline-block buttons. Both sections include CSS styles for button appearance and behavior.

Uploaded by

abdullahrehan034
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>

<html>

<head>

<style>

.btn-group .button {

background-color: #04AA6D; /* Green */

border: 1px solid green;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

font-size: 16px;

cursor: pointer;

width: 150px;

display: block;

.btn-group .button:not(:last-child) {

border-bottom: none; /* Prevent double borders */

.btn-group .button:hover {

background-color: #3e8e41;

</style>

</head>

<body>

<h2>Vertical Button Group</h2>


<div class="btn-group">

<button class="button">Button</button>

<button class="button">Button</button>

<button class="button">Button</button>

<button class="button">Button</button>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

.btn-group .button {

background-color: #04AA6D; /* Green */

border: none;

color: white;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

float: left;

}
.btn-group .button:hover {

background-color: #3e8e41;

</style>

</head>

<body>

<h2>Button Groups</h2>

<p>Remove margins and float the buttons to create a button group:</p>

<div class="btn-group">

<button class="button">Button</button>

<button class="button">Button</button>

<button class="button">Button</button>

<button class="button">Button</button>

</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p element also float next to
the buttons.</p>

</body>

</html>

You might also like