Button Color
Change the background color of a button using the background-color property
Button Width
Change the width of button using the width property
Button Size
Change the font size of a button using the font-size property
Button Size/Button Padding
Change the size of a button using the padding property
Button With Rounded Corners
Change the button corner style as rounded using the border-radius property
Hoverable Button
Change the button style using the :hover property
Shadow Buttons
Create button shadow using the box-shadow property
Group Buttons : Horizontal
Group buttons using the float property
Group Buttons : Verticle
Group buttons using the display property
Disabled Button
Disabled button style using the opacity and cursor property
Sample code: Button Styles
<!DOCTYPE html>
<html>
<head>
<style>
/*Button Colors*/
.buttoncolor
{
background-color: gray;
border: none;
color: white;
width: 150px;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.buttoncolor1 {background-color: red;}
.buttoncolor2 {background-color: green;}
.buttoncolor3 {background-color: blue;}
/*Button Width*/
.buttonwidth
{
background-color: brown;
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.buttonwidth1 {width: 250px;}
.buttonwidth2 {width: 50%;}
.buttonwidth3 {width: 100%;}
/*Button Size*/
.buttonsize
{
background-color: green;
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.buttonsize1 {font-size: 10px;}
.buttonsize2 {font-size: 15px;}
.buttonsize3 {font-size: 20px;}
/*Button Padding*/
.buttonpadding
{
background-color: red;
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.buttonpadding1 { padding: 12px 24px; }
.buttonpadding2 { padding: 16px 32px; }
.buttonpadding3 { padding: 20px 40px; }
.buttonpadding4 { padding: 18px; }
/*Button With Round Corners*/
.buttonround
{
background-color: orange;
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.buttonround1 { border-radius: 4px; }
.buttonround2 { border-radius: 8px; }
.buttonround3 { border-radius: 12px; }
.buttonround4 { border-radius: 50%; }
/*Hoverable Button*/
.buttonhoverable
{
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.buttonhoverable:hover { background-color: green; color: white; }
.buttonhoverable1 { background-color: white; color: black; border: 2px solid green; }
/*Shadow Button*/
.buttonshadow
{
background-color: green;
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.buttonshadow1 { box-shadow: 0 10px 20px 0 rgba(0,0,0,0.3), 0 6px 20px 0 rgba(0,0,0,0.2); }
.buttonshadow2:hover { box-shadow: 0 14px 20px 0 rgba(0,0,0,0.35),0 17px 50px 0 rgba(0,0,0,0.2); }
/*Grouping of Buttons : Horizontal*/
.buttongrouphor
{
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
float: left;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.buttongrouphor:hover { background-color: lightgreen; color: white; }
.buttongrouphor1 { background-color: black; color: white; border: 2px solid green; }
/*Grouping of Buttons : Verticle*/
.buttongroupver
{
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
display: block;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.buttongroupver:hover { background-color: lightgreen; color: white; }
.buttongroupver1 { background-color: yellow; color: black; border: 2px solid orange; }
/*Disabled Button*/
.buttondisabled
{
background-color: purple;
border: none;
color: black;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.disabled { opacity:0.5; cursor:not-allowed; }
</style>
</head>
<body>
<h2>Button Color</h2>
<p>Change the background color of a button using the background-color property</p>
<br><button class="buttoncolor buttoncolor1">Red</button>
<br><button class="buttoncolor buttoncolor2">Green</button>
<br><button class="buttoncolor buttoncolor3">Blue</button>
<br><br>
<h2>Button Width</h2>
<p>Change the width of button using the width property</p>
<br><button class="buttonwidth buttonwidth1">250px</button>
<br><button class="buttonwidth buttonwidth2">50%</button>
<br><button class="buttonwidth buttonwidth3">100%</button>
<br><br>
<h2>Button Size</h2>
<p>Change the font size of a button using the font-size property</p>
<br><button class="buttonsize buttonsize1">10px</button>
<br><button class="buttonsize buttonsize2">15px</button>
<br><button class="buttonsize buttonsize3">20px</button>
<br><br>
<h2>Button Size/Button Padding</h2>
<p>Change the size of a button using the padding property</p>
<br><button class="buttonpadding buttonpadding1">12px 24px</button>
<br><button class="buttonpadding buttonpadding2">16px 32px</button>
<br><button class="buttonpadding buttonpadding3">20px 40px</button>
<br><button class="buttonpadding buttonpadding4">18px</button>
<br><br>
<h2>Button With Rounded Corners</h2>
<p>Change the button corner style as rounded using the border-radius property</p>
<br><button class="buttonround buttonround1">4px</button>
<br><button class="buttonround buttonround2">8px</button>
<br><button class="buttonround buttonround3">12px</button>
<br><button class="buttonround buttonround4">50%</button>
<br><br>
<h2>Hoverable Button</h2>
<p>Change the button style using the :hover property</p>
<br><button class="buttonhoverable buttonhoverable1">Red</button>
<br><br>
<h2>Shadow Buttons</h2>
<p>Create button shadow using the box-shadow property</p>
<br><button class="buttonshadow buttonshadow1">Shadow Button</button>
<br><button class="buttonshadow buttonshadow2">Shadow on Hover</button>
<br><br>
<h2>Group Buttons : Horizontal</h2>
<p>Group buttons using the float property</p>
<br><button class="buttongrouphor buttongrouphor1">1</button>
<button class="buttongrouphor buttongrouphor1">2</button>
<button class="buttongrouphor buttongrouphor1">3</button>
<br><br>
<h2>Group Buttons : Verticle</h2>
<p>Group buttons using the display property</p>
<br><button class="buttongroupver buttongroupver1">1</button>
<button class="buttongroupver buttongroupver1">2</button>
<button class="buttongroupver buttongroupver1">3</button>
<br><br>
<h2>Disabled Button</h2>
<p>Disabled button style using the opacity and cursor property</p>
<br><button class="buttondisabled">Normal Button</button>
<br><button class="buttondisabled disabled">Disabled Button</button>
<br><br>
</body>
</html>
<html>
<head>
<style>
/*Button Colors*/
.buttoncolor
{
background-color: gray;
border: none;
color: white;
width: 150px;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.buttoncolor1 {background-color: red;}
.buttoncolor2 {background-color: green;}
.buttoncolor3 {background-color: blue;}
/*Button Width*/
.buttonwidth
{
background-color: brown;
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.buttonwidth1 {width: 250px;}
.buttonwidth2 {width: 50%;}
.buttonwidth3 {width: 100%;}
/*Button Size*/
.buttonsize
{
background-color: green;
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.buttonsize1 {font-size: 10px;}
.buttonsize2 {font-size: 15px;}
.buttonsize3 {font-size: 20px;}
/*Button Padding*/
.buttonpadding
{
background-color: red;
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.buttonpadding1 { padding: 12px 24px; }
.buttonpadding2 { padding: 16px 32px; }
.buttonpadding3 { padding: 20px 40px; }
.buttonpadding4 { padding: 18px; }
/*Button With Round Corners*/
.buttonround
{
background-color: orange;
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.buttonround1 { border-radius: 4px; }
.buttonround2 { border-radius: 8px; }
.buttonround3 { border-radius: 12px; }
.buttonround4 { border-radius: 50%; }
/*Hoverable Button*/
.buttonhoverable
{
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.buttonhoverable:hover { background-color: green; color: white; }
.buttonhoverable1 { background-color: white; color: black; border: 2px solid green; }
/*Shadow Button*/
.buttonshadow
{
background-color: green;
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.buttonshadow1 { box-shadow: 0 10px 20px 0 rgba(0,0,0,0.3), 0 6px 20px 0 rgba(0,0,0,0.2); }
.buttonshadow2:hover { box-shadow: 0 14px 20px 0 rgba(0,0,0,0.35),0 17px 50px 0 rgba(0,0,0,0.2); }
/*Grouping of Buttons : Horizontal*/
.buttongrouphor
{
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
float: left;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.buttongrouphor:hover { background-color: lightgreen; color: white; }
.buttongrouphor1 { background-color: black; color: white; border: 2px solid green; }
/*Grouping of Buttons : Verticle*/
.buttongroupver
{
border: none;
color: white;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
display: block;
cursor: pointer;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.buttongroupver:hover { background-color: lightgreen; color: white; }
.buttongroupver1 { background-color: yellow; color: black; border: 2px solid orange; }
/*Disabled Button*/
.buttondisabled
{
background-color: purple;
border: none;
color: black;
padding: 14px 28px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
}
.disabled { opacity:0.5; cursor:not-allowed; }
</style>
</head>
<body>
<h2>Button Color</h2>
<p>Change the background color of a button using the background-color property</p>
<br><button class="buttoncolor buttoncolor1">Red</button>
<br><button class="buttoncolor buttoncolor2">Green</button>
<br><button class="buttoncolor buttoncolor3">Blue</button>
<br><br>
<h2>Button Width</h2>
<p>Change the width of button using the width property</p>
<br><button class="buttonwidth buttonwidth1">250px</button>
<br><button class="buttonwidth buttonwidth2">50%</button>
<br><button class="buttonwidth buttonwidth3">100%</button>
<br><br>
<h2>Button Size</h2>
<p>Change the font size of a button using the font-size property</p>
<br><button class="buttonsize buttonsize1">10px</button>
<br><button class="buttonsize buttonsize2">15px</button>
<br><button class="buttonsize buttonsize3">20px</button>
<br><br>
<h2>Button Size/Button Padding</h2>
<p>Change the size of a button using the padding property</p>
<br><button class="buttonpadding buttonpadding1">12px 24px</button>
<br><button class="buttonpadding buttonpadding2">16px 32px</button>
<br><button class="buttonpadding buttonpadding3">20px 40px</button>
<br><button class="buttonpadding buttonpadding4">18px</button>
<br><br>
<h2>Button With Rounded Corners</h2>
<p>Change the button corner style as rounded using the border-radius property</p>
<br><button class="buttonround buttonround1">4px</button>
<br><button class="buttonround buttonround2">8px</button>
<br><button class="buttonround buttonround3">12px</button>
<br><button class="buttonround buttonround4">50%</button>
<br><br>
<h2>Hoverable Button</h2>
<p>Change the button style using the :hover property</p>
<br><button class="buttonhoverable buttonhoverable1">Red</button>
<br><br>
<h2>Shadow Buttons</h2>
<p>Create button shadow using the box-shadow property</p>
<br><button class="buttonshadow buttonshadow1">Shadow Button</button>
<br><button class="buttonshadow buttonshadow2">Shadow on Hover</button>
<br><br>
<h2>Group Buttons : Horizontal</h2>
<p>Group buttons using the float property</p>
<br><button class="buttongrouphor buttongrouphor1">1</button>
<button class="buttongrouphor buttongrouphor1">2</button>
<button class="buttongrouphor buttongrouphor1">3</button>
<br><br>
<h2>Group Buttons : Verticle</h2>
<p>Group buttons using the display property</p>
<br><button class="buttongroupver buttongroupver1">1</button>
<button class="buttongroupver buttongroupver1">2</button>
<button class="buttongroupver buttongroupver1">3</button>
<br><br>
<h2>Disabled Button</h2>
<p>Disabled button style using the opacity and cursor property</p>
<br><button class="buttondisabled">Normal Button</button>
<br><button class="buttondisabled disabled">Disabled Button</button>
<br><br>
</body>
</html>
No comments:
Post a Comment