EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

Button in CSS

By Priya PedamkarPriya Pedamkar

Home » Software Development » Software Development Tutorials » CSS Tutorial » Button in CSS

Button in CSS

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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

Popular Course in this category
CSS Training (9 Courses, 9+ Projects)9 Online Courses | 9 Hands-on Projects | 61+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (5,444 ratings)
Course Price

View Course

Related Courses
Bootstrap Training (2 Courses, 6+ Projects)jQuery Training (8 Courses, 5 Projects)

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

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

  1. CSS Transparent Border
  2. CSS Color Generator
  3. CSS Curved Border
  4. CSS Clearfix

All in One Software Development Bundle (600+ Courses, 50+ projects)

600+ Online Courses

50+ projects

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
CSS Tutorial
  • CSS
    • Introduction To CSS
    • What is CSS?
    • Uses Of CSS
    • Advantages of CSS
    • Career In CSS
    • CSS Commands
    • Is Css Case Sensitive
    • CSS object-fit
    • Types of CSS Selectors
    • CSS Radio Button
    • CSS Attribute Selector
    • CSS first child of class
    • CSS Selector nth Child
    • CSS Parent Selector
    • CSS Child Selector
    • CSS Not Selector
    • CSS Descendant Selector
    • CSS Inline Style
    • Checkbox CSS
    • CSS Appearance
    • CSS Font Properties
    • CSS font-variant
    • CSS Pagination
    • CSS Table Styling
    • CSS Table Cell Padding
    • CSS Padding Color
    • CSS Text Formatting
    • CSS for Text-Shadow
    • CSS text-stroke
    • CSS text-indent
    • CSS Rotate Text
    • CSS Text Color
    • CSS Center Div
    • CSS Arrow
    • CSS Arrow Down
    • CSS offset
    • CSS Cursor
    • CSS Layout
    • CSS Grid Layout
    • Button in CSS
    • CSS Button Border
    • text-align in CSS
    • CSS Horizontal Align
    • CSS Position
    • CSS Box Sizing
    • CSS box-shadow
    • CSS Text Underline
    • CSS Text Outline
    • CSS Blinking Text
    • Text Decoration CSS
    • CSS Vertical Align
    • CSS Word Wrap
    • CSS Padding
    • CSS Font Color
    • CSS Color Generator
    • CSS Margin Right
    • CSS Margin Color
    • CSS Color Codes
    • CSS Color Transparent
    • CSS Color Chart
    • CSS Link Color
    • CSS z-index
    • CSS Curved Border
    • CSS Border Left
    • CSS left
    • CSS Gradient Generator
    • Radial Gradient in CSS
    • CSS Shape Generator
    • CSS Triangle Generator
    • CSS background-color
    • CSS Background Image
    • CSS background-clip
    • CSS background-blend-mode
    • CSS Drop Shadow
    • CSS line height
    • CSS line break
    • Sticky Footer CSS
    • CSS Header Design
    • CSS Border Style
    • CSS Border Generator
    • Sticky Sidebar CSS
    • CSS Transparent Border
    • CSS Border Radius
    • CSS translate
    • CSS transform
    • CSS 3D Transforms
    • CSS Text Transform
    • CSS Transition Effects
    • CSS Transition Property
    • CSS Animation Transition
    • Negative Margin CSS
    • CSS Navigation Bar
    • CSS Overflow
    • CSS overflow-wrap
    • CSS Lists
    • CSS list-style
    • CSS Order
    • CSS Box Model
    • CSS Inner Border
    • CSS Icon
    • Menu Icon CSS
    • CSS Multiple Borders
    • Opacity in CSS
    • CSS Float Right
    • CSS Clear Float
    • CSS clip
    • CSS disabled
    • CSS Border Padding
    • Border Images in CSS
    • CSS Visibility
    • CSS Validator
    • CSS Clearfix
    • CSS Counter
    • CSS Letter Spacing
    • CSS root
    • CSS zoom
    • CSS calc()
    • CSS.supports()
    • CSS Loader
    • Media Query CSS
    • CSS @keyframes
    • CSS @bottom
    • CSS page-break-after Property
    • CSS page-break
    • CSS Position Fixed
    • CSS skew()
    • CSS Row
    • CSS Masking
    • CSS Scrollbar
    • CSS Overlay
    • CSS Important
    • CSS Cursor Hand
    • CSS Inherit
    • CSS Position Relative
    • CSS Compressor
    • CSS tricks
    • CSS Outline Property
    • CSS Flexbox Properties
    • CSS flex-direction
    • CSS content property
    • CSS Typography
    • CSS Formatter
    • CSS nowrap
    • CSS Column
    • GridView CSS
    • CSS Viewport
    • CSS Minify
    • CSS Combinators
    • CSS in React
    • CSS Matrix 
    • CSS Pseudo Elements
    • CSS Pseudo Classes
    • CSS Pointer Events
    • CSS Resize
    • CSS Inheritance
    • CSS Interview Questions
    • Cheat Sheet CSS
  • CSS3
    • What is CSS3?
    • CSS3 Interview Questions
    • Cheat sheet CSS3
  • sass
    • How to Install SASS
    • SASS Interview Questions
    • What is Sass
    • SASS Comments
    • Sass Variables
    • SASS Import
    • SASS if else
    • SASS Nesting
    • SASS @each
    • SASS @at-root
    • SASS @extend
    • SASS @media
    • SASS @for
    • SASS Map
    • SASS Selectors
    • SASS Color Functions
    • SASS Mixins

Related Courses

CSS Training Course

Bootstrap Training Course

JQuery Training Course

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - CSS Training Course Learn More