Tutorial At Home

Prev Next

CSS Overflow Property | excess text in a div Vertical Navigation Bar Creation using CSS and HTML.

CSS Button property applies color effect on button using CSS. - CSS 3.0

4254 Arnab De 12/05/2017

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

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>

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

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>

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>

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>

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

Prev Next

CSS Overflow Property | excess text in a div Vertical Navigation Bar Creation using CSS and HTML.

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.

Enter New Comment

Comment History

No Comment Found Yet.