CSS Button property applies color effect on button using CSS.
12-05-2017    637 times
CSS Button Property

CSS Button property 

Button is a form element in HTML. In Html Buttons are look like a simple standard button use in windows standard themes.

Buttons are three types

  • Button
  • Submit
  • Reset


<form name="f1" action"" method="">
<input type="button" value="Click Me" />
<input type="Submit" value="Go" />
<input type="reset" value="Clean Me" />
</form>

Simple Button
Simple Button

Styling HTML BUTTON BY CSS

We can create some special look on HTML button using the following CSS properties.

Button Colors

Button background color can be changed by the background-color property of CSS.

CSS CODE

.REDbutton{background-color:#FF0000;}
.GREENbutton{background-color:#009900;}
.BLUEbutton{background-color:#15AAF2;}
.ORANGEbutton{background-color:#EF670C;}
.PINKbutton{background-color:#F49BEE;}

HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Button Font Size</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="f1" action="" method="">
<input type="button" class="REDbutton" value="RED" />
<input type="button" class="GREENbutton" value="GREEN" />
<input type="button" class="BLUEbutton" value="BLUE" />
<input type="button" class="ORANGEbutton" value="ORANGE" />
<input type="button" class="PINKbutton" value="PINK" />
</form>
</body>
</html>

Color Button
Color Button

Button font Sizes

Button size can be changed by the font-size property of CSS and it may shape the button as needed.

CSS CODE

.btn10px{background-color:#FF0000;font-size:10px;}
.btn12px{background-color:#FF0000;font-size:12px;}
.btn14px{background-color:#FF0000;font-size:14px;}
.btn16px{background-color:#FF0000;font-size:16px;}
.btn18px{background-color:#FF0000;font-size:18px;}
.btn20px{background-color:#FF0000;font-size:20px;}

HTML CODE

<!DOCTYPE html>
<html><head><title>Button Font Size</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="f1" action"" method="">
<input type="button" class="btn10px" value="10px" />
<input type="button" class="btn12px" value="12px" />
<input type="button" class="btn14px" value="140px" />
<input type="button" class="btn16px" value="16px" />
<input type="button" class="btn18px" value="18px" />
<input type="button" class="btn20px" value="20px" />
</form>
</body>
</html>

Button Font Size
Button Font Size

Button Padding

To set the padding of a button we use the padding property of CSS. Padding means the distance between the boundary of the button and value of the button.

CSS CODE

.btn
{
background-color:#00FFAA;
font-size:14px;
padding: 10px 24px;
}

HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Button Padding</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="f1" action"" method="">
<input type="button" class="btn" value="14px" />
</form>
</body>
</html>

Rounded Buttons

To make round shape of the button corner we use border-radius property of CSS.

CSS CODE

.btn1
{
background-color:#00FFAA;
font-size:14px;
padding: 10px 24px;
border-radius: 50%;
}
.btn2
{
background-color:#00FFAA;
font-size:14px;
padding: 10px 24px;
border-radius: 12px;
}

HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Button Padding</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="f1" action"" method="">
<input type="button" class="btn1" value="50%" />
<input type="button" class="btn2" value="12px radius" />
</form>
</body></html>

Button Rounding
Button Rounding

Button Borders

To set the border style, width and color we use the border property of the button:

CSS CODE

.btn1
{
background-color:#ffffff;
font-size:14px;
padding: 10px 24px;
border: 2px solid #4CAF50;
}
.btn2
{
background-color:#00FFAA;
font-size:14px;
padding: 10px 24px;
border-style:none; /* dashed | dotted | groove | hidden |inherit |
inset | none | solid */
border-color:#0033FF;
border-width:thick
}

HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Button Padding</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="f1" action"" method="">
<input type="button" class="btn1" value="solid" />
<input type="button" class="btn2" value="dotted" />
</form>
</body></html>

Button Border
Button Border

Note:
We can also set the border of a button separately by set the value of the following properties:
Border-top-style
Border-top-color
Border-top-width

Border-left-style
Border-left -color
Border-left -width

Border-right-style
Border-right-color
Border-right-width

Border-bottom-style
Border-bottom-color
Border-bottom-width

Hover-able Buttons

To show animation on the button we use the :hover selector in CSS code. When mouse pointer placed on the button then a animation(as per code) will be visible.

CSS CODE


.btn1
{
background-color:#ffffff;
font-size:14px;
padding: 10px 24px;
border: 2px solid #4CAF50;
}
.btn1:hover
{
background-color:#AAAAAA;
font-size:14px;
padding: 10px 24px;
border: 2px solid #4CAF50;
}

HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Button Hover Effect</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="f1" action"" method="">
<input type="button" class="btn1" value="solid" />
<input type="button" class="btn2" value="dotted" />
</form>
</body>
</html>

Button Hover Effect
Button Hover Effect

Note: The transition-duration property is used to set the speed of the "hover" effect:


CSS CODE


.btn1
{
background-color:#ffffff;
font-size:14px;
padding: 10px 24px;
border: 2px solid #4CAF50;
}
.btn1:hover
{
background-color:#AAAAAA;
font-size:14px;
padding: 10px 24px;
border: 2px solid #4CAF50;
transition-duration: 2s; /* google Chrome */
-webkit-transition-duration: 0.4s; /* Safari */
-ms- transition-duration: 0.4s; /* Internet Explorer */
-o- transition-duration: 0.4s; /*opera */
}
.btn2
{
background-color:#ffAAAA;
font-size:14px;
padding: 10px 24px;
border: none;
}
.btn2:hover
{
background-color:#FFAA12;
font-size:14px;
padding: 10px 24px;
border:2px solid #4CAF50;
transition-duration: 0.4s;
}

HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Button Hover Effect</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="f1" action"" method="">
<input type="button" class="btn1" value="2s Transition" />
<input type="button" class="btn2" value="0.4s Transition" />
</form>
</body>
</html>

Shadow Buttons

box-shadow property used to add shadows to a button:
CSS CODE


.btn2
{
background-color:#ffAAAA;
font-size:14px;
padding: 10px 24px;
border: none;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
}
.btn2:hover
{
background-color:#FFAA12;
font-size:14px;
padding: 10px 24px;
border-color:#4CAF50;
border-width:2px;
border-style:solid;
transition-duration: 0.4s;
}


HTMLCODE

<!DOCTYPE html>
<html>
<head>
<title>Button Hover Effect</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="f1" action"" method="">
<input type="button" class="btn2" value="shadow" />
</form>
</body>
</html>

Button Shadow
Button Shadow


Disabled Buttons

We can set the opacity and cursor property of the button to make a look of disable button.

CSS CODE


.btn1
{
background-color:#ffffff;
font-size:14px;
padding: 10px 24px;
border: 2px solid #4CAF50;
}
.disabled
{
opacity: 0.6;
cursor: not-allowed;
}

HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Button Hover Effect</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="f1" action"" method="">
<input type="button" class="btn1 disabled" value="shadow" />
</form>
</body>
</html>

Disable Button
Disable Button

Button Width

By default, the length of the value attribute of the button is determine the size of the button. But we can change the width of a button by using the width property to change the width of a button.

CSS Code

.btn1
{
background-color:#ffffff;
font-size:14px;
padding: 10px 24px;
width: 100%;
border: 2px solid #4CAF50;
}

HTML Button

<!DOCTYPE html>
<html>
<head>
<title>Button Width</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="f1" action"" method="">
<input type="button" class="btn1" value="shadow" />
</form>
</body>
</html>

Button Border Width
Button Border Width

Button Groups

We can create a button group using the following code. We can also set a space between two button using margin property of the CSS.

CSS CODE

.btn1
{
background-color:#ffffff;
font-size:14px;
padding: 10px 24px;
border: 2px solid #4CAF50;
}
.button {
float: left;
margin-left:15px;
}

HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Button Group</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="f1" action"" method="">
<input type="button" class="button btn1" value="Grouped" />
<input type="button" class="button btn2" value="Grouped" />
<input type="button" class="button btn2" value="Grouped" />
<input type="button" class="button btn1" value="Grouped" />
</form>
</body>
</html>

Group of Buttons
Group of Buttons
softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post