Introduction to Button in CSS
The following article provides an outline of the Button in CSS. Buttons are used to perform any action by clicking on it (like submitting a form in an application). Link is also like a button, but a link is used for navigating (changing) in between pages and views.
Real-Time Example: If consider any online exam, it has 4 or 5 options for each question. Once we choose any option we must go to the next question. For this, it has a Save Next button. If we want to clear the chosen response then there is a Reset or Clear Response button. If you want to revisit or recap the question by marking it with the Marked for Review button. At last, once we have done with our exam Submit or Finish button for the end of the test.
In all these cases every time each button has its own specific action to perform like “go to next question”,” clear response”, “marked for review”, and “finish the test”.
Why CSS come into the Picture?
It can be illustrated by the below examples:
1. Without CSS
Let us see with the help of examples
Example #1: SaveNext.html
Code:
<!doctype html>
<html>
<head>
<style type="text/css">
input[type=button], input[type=submit], input[type=reset] {
border-width: 2px;
padding: 4px
font-size: 10pt;
color: yellow;
background-color: brown;
text-align: center;
}
#educba{
text-align: center;
}
</style>
<title>Save Next</title>
</head>
<body>
<div id="educba">
<input type="button" value="Save Next">
</div>
</body>
</html>
Output:
Example #2: Reset.html
Code:
<!doctype html>
<html>
<head>
<style type="text/css">
input[type=button], input[type=submit], input[type=reset] {
border-width: 2px;
padding: 4px;
font-size: 10pt;
color: yellow;
background-color: brown;
text-align: center;
}
#educba {
text-align: center;
}
</style>
<title>Reset</title>
</head>
<body>
<div id="educba">
<input type="reset" value="Reset">
</div>
</body>
</html>
Output:
Example #3: MarkForReview.html
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input[type=button], input[type=submit], input[type=reset] {
border-width: 2px;
padding: 4px;
font-size: 10pt;
color: yellow;
background-color: brown;
text-align: center;
}
#educba {
text-align: center;
}
</style>
<title>MarkForReview</title>
</head>
<body>
<div id="educba">
<input type="button" value="Marked For Review">
</div>
</body>
</html>
4.5 (5,444 ratings)
View Course
Output:
Example #4: Submit.html
Code:
<!DOCTYPE html>
<html>
<style type="text/css">
input[type=button], input[type=submit], input[type=reset] {
border-width: 2px;
padding: 4px;
font-size: 10pt;
color: yellow;
background-color: brown;
text-align: center;
}
#educba {
text-align: center;
}
</style>
<title>Submit</title>
</head>
<body>
<div id="educba">
<input type="submit" value="Submit">
</div>
</body>
</html>
Output:
Demonstration of Above examples:
- In above 4 examples we have different buttons SaveNext, Reset, MarkForReview, and Submit. Each button has same style, color, background, border, and padding.
- Even though we have written 4 times same lines “style=”font-size: 10pt; color: yellow; background-color: brown; border: 2px; padding: 4px” in all 4 examples.
- There are only 4 html files, so we have written manually but consider more than 1000 such files. It is very time consuming and difficult to write that many files and also confusing while looking at the code.
- If we have technology write all common properties at one place than we have done with our job very easily.
- Then Engineers come up CSS abbreviated as Cascade Style Sheets, name itself indicates purpose is “styling the sheets”.
2. With CSS
Let us see with the help of examples
Example #1: SaveNext.html
Code:
<><!doctype html>
<html>
<head&code;
<link rel="stylesheet" href="Styles.css">
<title>Save Next</title>
</head>
<body>
<div id="educba">
<input type="button" value="Save Next">
</div>
</body>
</html>
Example #2: Reset.html
Code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Styles.css">
<title>Reset</title>
</head>
<body>
<div id="educba">
<input type="reset" value="Reset">
</div>
</body>
</html>
Example #3: MarkForReview.html
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Styles.css">
<title>MarkForReview</title>
</head>
<body>
<div id="educba">
<input type="button" value="Marked For Review">
</div>
</body>
</html>
Example #4: Submit.html
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Styles.css">
<title>Submit<</html>
;/title>
</head>
<body>
<div id="educba">
<input type="submit" value="Submit">
</div>
</body>
- CSS Code for Above Examples: Styles.css
input[type=button], input[type=submit], input[type=reset] {
border-width: 2px;
padding: 4px;
font-size: 10pt;
color: yellow;
background-color: brown;
text-align: center;
}
#educba{
text-align: center;
}
- At last we have achieved our requirement with above css by common logic at place.Both with css and without css output same as above example.
How does CSS Button work?
- CSS will function by adding “<link rel=”stylesheet” href=”Styles.css”>” within html <head> tag.
- Button functionality action work as per written in the code. This code will be run by internal java script machine, it converts all html and css instructions into web instructions.
Syntax:
Selector{Property: Value;}
Example:
h1{ //h1 is selector
padding: 2px 2px 2px 2px; //padding is property
// 2px 2px 2px 2px are values to property}
Different Property declarations in CSS
Consider this below button example for all the upcoming property declarations.
<html>
<head>
<title>Button</title>
</head>
<body>
<button class=”button”>Button</button>
</body>
</html>
1. Colors to Buttons
background-color property: Set the background color of button.
Color property: Set the text color.
Example:
.button {
background-color: green;
color: yellow;
}
2. Padding to Buttons
Padding property: Set the padding of button means it will decide the size of the button from the top, right, bottom and left.
Example:
.button{
padding: 10px 20px 10px 20px; //top right, bottom, left respectively
}
3. Margin to Buttons
Margin property: Set the margin of button means it will decide where the button has to locate from the top, right, bottom and left.
Example:
. button{
margin: 10px 20px 10px 20px; //top right, bottom, left respectively
}
4. Size to Buttons
Font-size property: Set the font size of button.
Example:
.button
{
Font-size: 5px;
}
5. Radius to Buttons
Border-radius property: Set the radius to button (make circle shape).
Example:
.button
{
border-radius: 5px;
}
6. Hovering to Buttons
Hover property: Move the cursor on to button than action will be performed.
Example:
.button: hover
{
background-color: green;//Move cursor on to button than appear green color
color: yellow;//Move away from button than appear yellow color
}
7. Shadowing Buttons
Box-shadow: Move the cursor on to button than its shadow will appear either top, right, bottom or left as specified in the values.
Example:
.button
{
box-shadow : 0 10px 20px 0 black; //shadow appears as black at right and bottom side of the button
}
8. Disabling Buttons
Disable property: Disable the button.
Example:
. disable .button{
opacity: 0.5; //Makes button half visible in color
cursor: not-allowed; //cursor is not allowed on this button
} <?code>
Examples with CSS Code
Given below are the examples:
Example #1
Simple & Radius & Border Buttons.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="ButtonStyles.css">
<title>Simple & Radius & Border Buttons </title>
</head>
<body>
<div class="educba">
<button type="button" >Simple</button>
<button type="button" >Radius</button>
<button type="button" >Border</button>
</div>
</body>
</html>
CSS Logic:
.educba{
width:900px;
padding:10% 50px;
margin:0 auto;
}
body{
background:brown;
}
button{
width:180px;
display:inline-block;/*top and bottom padding done respectively*/
padding:20px 0px;
text-align: center;font-family: sans-serif;
font-size: 15px;
font-weight: bold;
color:#fff;
position: relative; /*normal default position of button*/
text-decoration: none;
letter-spacing: 1.5px;
}
button:NTH-CHILD(1) { /*NTH-CHILD represent which button affects from multiple*/
background: blue;
}
button:NTH-CHILD(2) {
background: green;
border-radius: 10px;
}
button:NTH-CHILD(3) {
background: black;
border:3px solid red;
}
Output:
Example #2
Border Radius-Dotted-Dashed Buttons.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="ButtonStyles.css">
<title>Border Radius-Dotted-Dashed Buttons</title>
</head>
<body>
<div class="educba">
<button type="button" >BorderRadius</button>
<button type="button" >Dotted</button>
<button type="button" >Dashed</button>
</div>
</body>
</html>
CSS Code:
.educba{
width:900px;
padding:10% 50px;
margin:0 auto;
}
body{
background:white;
}
button{
width:180px;
display:inline-block;
padding:20px 0px;
text-align: center;font-family: sans-serif;
font-size: 15px;
font-weight: bold;
color:#fff;
position: relative;
text-decoration: none;
letter-spacing: 1.5px;
}
button:NTH-CHILD(1) {
background: orange;
border:3px solid red;
border-radius: 10px;
}
button:NTH-CHILD(2) {
background: silver;
border:3px dotted red;/*border with dotted lines*/
}
button:NTH-CHILD(3) {
background: gray;
border:3px dashed red;/*border with dashed lines*/
}
Output:
Example #3
Curved-Reverse Curve-Hover Buttons.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="ButtonStyles.css">
<title>Curved-Reverse Curve-Hover Buttons</title>
</head>
<body>
<div class="educba">
<button type="button" >Curve</button>
<button type="button" >Reverse Curve</button>
<button type="button" >Hover</button>
</div>
</body>
</html>
CSS Code:
.educba{
width:900px;
padding:10% 50px;
margin:0 auto;
}
body{
background:lime;
}
button{
width:180px;
display:inline-block;
padding:20px 0px;
text-align: center;font-family: sans-serif;
font-size: 15px;
font-weight: bold;
color:black;
position: relative;
text-decoration: none;
letter-spacing: 1.5px;
}
button:NTH-CHILD(1) {
background: brown;
border-radius: 25px 0 25px 0;
}
button:NTH-CHILD(2) {
background: gold;
border-radius: 0 25px 0 25px;
}
button:NTH-CHILD(3):HOVER {
background: blue; /*hover than button becomes blue*/
}
Output:
Example #4
Half Dashed-Radius Right-Inside Circle Buttons.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="ButtonStyles.css">
<title>Half Dashed-Radius Right Circle Buttons</title>
</head>
<body>
<div class="educba">
<button type="button" >Half Dashed</button>
<button type="button" >Right</button>
<button type="button" >Circle</button>
</div>
</body>
</html>
CSS Code:
.educba{
width:900px;
padding:10% 50px;
margin:0 auto;
}
body{
background:purple;
}
button{
width:180px;
display:inline-block;
padding:20px 0px;
text-align: center;font-family: sans-serif;
font-size: 15px;
font-weight: bold;
color:black;
position: relative;
text-decoration: none;
letter-spacing: 1.5px;
}
button:NTH-CHILD(1){
background:green;
}
button:NTH-CHILD(1)::BEFORE {
content:"";
width:calc(100%); /*calc() function used for calculate width or height*/
height: calc(100%-14px);
position: absolute; /*not fixed moved along with a page if increase or decrease the page size*/
left: 0px;
top:5px;
border-bottom: 2px dashed yellow;
border-top: 2px dashed yellow;
}
button:NTH-CHILD(2) {
background: orange;
border-radius: 30px;
text-align: right;
width:160px;
padding-right: 20px;
}
button:NTH-CHILD(3)::BEFORE {
content:"";
width:calc(45px);
height: calc(45px);
position: absolute;
left: 11px;
top:11px;
border-radius:20px;
background: orange;
}
button:NTH-CHILD(3){
background: brown;
border-radius: 30px;
text-align: right;
width:160px;
padding-right: 20px;
}
Output:
Example #5
Linear Gradient Buttons.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="ButtonStyles.css">
<title>Linear gradient</title>
</head>
<body>
<div class="educba">
<button type="button" >Linear Gradient</button>
<button type="button" >Angle Linear Gradient</button>
</div>
</body>
</html>
CSS Code:
.educba{
width:900px;
padding:10% 50px;
margin:0 auto;
}
body{
background:white;
}
button{
width:180px;
display:inline-block;
padding:20px 0px;
text-align: center;font-family: sans-serif;
font-size: 15px;
font-weight: bold;
color:black;
position: relative;
text-decoration: none;
letter-spacing: 1.5px;
}
button:NTH-CHILD(1){
background: linear-gradient(to left,blue,green,yellow,brown); /*multiples colors at a time */border: 0px;
}
button:NTH-CHILD(2) {
background: linear-gradient(-45deg,red,blue);/* multiples colors at a time with angle*/
border: 0px;
}
Output:
Important Note: Apply CSS file within HTML file we must add below script in <head> tag.
<link rel="stylesheet" href="Styles.css">
Recommended Articles
This is a guide to the Button in CSS. Here we discuss the introduction to CSS Button along with the different property declarations in CSS and examples. You may also have a look at the following articles to learn more –
