The CSS Buttons are used to decorate the web pages by applying the various styling properties to the button. Buttons are used for event processing and interacting with the user. From submitting a form to getting to view some information, we have to click on buttons. Button tag is used to create buttons in HTML.
Example: This simple example describes the button tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button tag </title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>button tag</h2>
<button>Button</button>
</body>
</html>
|
Output:
Basic Styling in button: There are many CSS properties used to style the button element which is discussed below:
background-color: This property is used to set the background color of the button.
Syntax:
element {
background-color: color_name;
}
Example: This example describes the Button with basic styling property where the background-color is applied to the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button background Color </title>
<style>
.button {
border: none;
color: white;
text-align: center;
font-size: 20px;
}
.b1 {
/* Set button background color */
background-color: red;
}
.b2 {
/* Set button background color */
background-color: blue;
}
.b3 {
/* Set button background color */
background-color: green;
}
.b4 {
/* Set button background color */
background-color: yellow;
}
</style>
</head>
<body>
<button class="button b1">Red</button>
<button class="button b2">Blue</button>
<button class="button b3">Green</button>
<button class="button b4">Yellow</button>
</body>
</html>
|
Output:
border: This property is used to set the border of the button.
Syntax:
element {
border: style;
}
Example: This example describes the Button with the border property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button background Color </title>
<style>
.button {
background-color: red;
color: white;
text-align: center;
font-size: 20px;
}
.b1 {
/* Set border property */
border: none;
}
.b2 {
/* Set border property */
border: 2px black solid;
}
.b3 {
/* Set border property */
border: 2px black dashed;
}
.b4 {
/* Set border property */
border: 2px black double;
}
.b5 {
/* Set border property */
border: 2px black groove;
}
</style>
</head>
<body>
<button class="button b1">None</button>
<button class="button b2">Solid</button>
<button class="button b3">Dashed</button>
<button class="button b4">Double</button>
<button class="button b5">Groove</button>
</body>
</html>
|
Output:
color: This property is used to set the color of the text in the button. The color value can be set in terms of color name, color hex code, etc.
Syntax:
element {
color: style;
}
Example: This example describes the Button with the color property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button background Color </title>
<style>
.button {
background-color: red;
border: none;
text-align: center;
font-size: 20px;
}
.b1 {
/* Set the color of text */
color: white;
}
.b2 {
/* Set the color of text */
color: black;
}
.b3 {
/* Set the color of text */
color: blue;
}
</style>
</head>
<body>
<button class="button b1">White</button>
<button class="button b2">Black</button>
<button class="button b3">Blue</button>
</body>
</html>
|
Output:
padding: This property is used to set the padding in the button.
Syntax:
element {
padding: style;
}
Example: This example describes the Button with the padding property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button padding property </title>
<style>
.b {
border: none;
font-size: 16px;
}
.b1 {
background-color: red;
padding: 15px 32px;
}
.b2 {
background-color: blue;
padding: 24px 50px;
}
.b3 {
background-color: green;
padding: 32px 32px;
}
.b4 {
background-color: yellow;
padding: 16px;
}
</style>
</head>
<body>
<button class="button b1">15px 32px</button>
<button class="button b2">24px 50px</button>
<button class="button b3">32px 32px</button>
<button class="button b4">16px</button>
</body>
</html>
|
Output:
font-size: This property is used to set the size of the text in the button. Change the pixel value to get the desired size.
Syntax:
element {
font-size: style;
}
Example: This example describes the Button with the font-size property to adjust the font of the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button font-size property </title>
<style>
.button {
padding: 15px 32px;
border: none font-size: 16px;
}
.b1 {
background-color: red;
font-size: 10px;
}
.b2 {
background-color: blue;
font-size: 15px;
}
.b3 {
background-color: green;
font-size: 20px;
}
.b4 {
background-color: yellow;
font-size: 30px;
}
</style>
</head>
<body>
<button class="button b1">10px </button>
<button class="button b2">15px</button>
<button class="button b3">20px</button>
<button class="button b4">30px</button>
</body>
</html>
|
Output:
border-radius: This property is used to set the border-radius of the button. It sets the rounded corners of the border.
Syntax:
element {
border-radius: property;
}
Example: This example describes the Button with the border-radius property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button border-radius property </title>
<style>
.b {
padding: 15px 32px;
border: none;
font-size: 16px;
}
.b1 {
background-color: red;
border-radius: 3px;
}
.b2 {
background-color: blue;
border-radius: 6px;
}
.b3 {
background-color: green;
border-radius: 10px;
}
.b4 {
background-color: yellow;
border-radius: 20px;
}
.b5 {
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<body>
<button class="b b1">3px </button>
<button class="b b2">6px</button>
<button class="b b3">10px</button>
<button class="b b4">20px</button>
<button class="b b5">50%</button>
</body>
</html>
|
Output:
box-shadow: This property is used to create the shadow of the button box.
Syntax:
box-shadow: [horizontal offset] [vertical offset] [blur radius]
[optional spread radius] [color];
Example: This example describes the Button with the box-shadow property.
HTML
<!DOCTYPE html>
<html>
<head>
<title> button box-shadow property </title>
<style>
.b {
padding: 15px 32px;
border: none font-size: 16px;
color: white;
}
.b1 {
background-color: green;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<button class="b b1">Shadow 1 </button>
</body>
</html>
|
Output:
width: This property is used to set the width of the button.
Syntax:
element {
width: property;
}
Example: This example describes the Button with the width property to set the width of the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title>button width property</title>
<style>
.button {
padding: 15px 32px;
border: none;
font-size: 16px;
color: white;
}
.b1 {
background-color: red;
width: 100px;
}
.b2 {
background-color: blue;
width: 200px;
}
.b3 {
background-color: green;
width: 50%;
}
.b4 {
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<button class="button b1">100px </button>
<button class="button b2">200px </button>
<button class="button b3">50% </button>
<button class="button b4">100%</button>
</body>
</html>
|
Output:
Hover Effects: This property is used to change the button interface when the mouse moves over.
Syntax:
element:hover {
// CSS property
}
Example: This example describes the Button with the hovering effect on the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title>button width property</title>
<style>
.button {
padding: 15px 32px;
border: none font-size: 16px;
color: white;
transition-duration: 0.3s;
}
.b1 {
background-color: green;
}
.b2 {
background-color: orange;
}
.b1:hover {
background-color: white;
color: orange;
}
.b2:hover {
background-color: white;
color: green;
}
</style>
</head>
<body>
<button class="button b1">Green </button>
<button class="button b2">Orange </button>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Firefox
- Microsoft Edge
- Internet Explorer
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!