Button in CSS


Click Here And Get This Posted To YOU In PDF Format

Button in CSS

Introduction to Button in CSS

The following article provides an outline on 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 button, but 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 for next question. For this it has Save Next button. If we want to clear the chosen response than there is Reset or Clear Response button. If you want revisit or recap the question by marking with Marked for Review button. At last once we done with our exam Submit or Finish button for end the test. 

In all this cases every time each button has their own specific action to perform like “go to next question”,” clear response”, “marked for review”, and “finish the test”. 

Why CSS come into Picture?

It can be illustrated by 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&gt
</body>
</html>

Output:

button in css op 1

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:

button in css 2

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&gt
</html>

Output:

MarkForReview.html

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&gt
</html>

Output:

Submit.html

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&lt</html>
;/title>
</head>
<body>
<div id=”educba”>
<input type=”submit” value=”Submit”&gt
</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;
}

Note: class selector must be started with “.” followed by selector. Upcoming all examples .button is selector as we have taken in the above example class as button.

2. Padding to Buttons

Padding property: Set the padding of button means it will decide size of the button from 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 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:

button in css 5JPG

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:

Border Radius-Dotted-Dashed

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:
Curved-Reverse Curve-Hover

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:

button in css 8JPG

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: 

button in css 9

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

Bootstrap Toggle Button
CSS Transparent Border
CSS Color Generator
CSS Curved Border

The post Button in CSS appeared first on EDUCBA.

Read more: educba.com

What's Your Reaction?

Cry Cry
0
Cry
Cute Cute
0
Cute
Damn Damn
0
Damn
Dislike Dislike
0
Dislike
Like Like
0
Like
Lol Lol
0
Lol
Love Love
0
Love
Win Win
0
Win
WTF WTF
0
WTF

Comments 0

Your email address will not be published. Required fields are marked *

Button in CSS

log in

Become a part of our community!

Captcha!
Don't have an account?
sign up

reset password

Back to
log in

sign up

Join BoomBox Community

Captcha!
Back to
log in
Choose A Format
Personality quiz
Trivia quiz
Poll
Story
List
Open List
Ranked List
Meme
Video
Audio
Image