Buttons are clickable elements that perform certain actions when pressed. For example,
The above example shows the default button and a button with CSS style.
Create a Button
A button is created using a <button> element. For
example,
<button>button</button>
Browser Output
Here, the default button doesn't look good without any styles.
Style a Button
We can use the following properties to style a button,
-
background-color: changes the background color of a button padding: adds padding to the buttonwidth: sets the width of the buttonborder: specifies the border to the buttonborder-radius: rounds the corners of the buttonbox-shadow: adds a shadow effect to the button
Let's look at an example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS buttons</title>
</head>
<body>
<button class="button">Submit</button>
</body>
</html>
.button {
background-color: purple;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
font-family: monospace;
color: white;
padding: 20px;
margin-left: 10px;
text-align: center;
cursor: pointer;
}
Browser Output
In the above example,
-
background-color: purpleadds apurplecolor to button background -
border-radius: 5pxmakes the corners of the button rounded with a5pxradius font-weight: boldbolds the button text-
font-size: 18pxsets the font size to18px -
font-family: monospace:defines the font family of the button text color: whitesets the text color towhite-
padding: 20pxadds a padding of20pxin the button -
text-align: centeraligns the button text in the center -
cursor: pointerchanges the cursor to pointer on button hover
Style Button States
A button has three different states as,
- Hover
- Focus
- Active
Let's look at each of them in detail.
Style Hover State
The hover state is triggered when the user puts the cursor over an element.
The :hover pseudoclass selector is used to add styles for the hover state.
Let's see an example,
.button:hover{
background-color: red;
}
Browser Output
Here, the background changes from purple to
red during the button hover.
Note: The transition property creates a smooth
transition of styles when the button is hovered.
Style Focus State
The focus state is triggered when an element receives the
keyboard focus.
The :focus pseudoclass selector is used to add styles for the
focus state.
The button is focused using the Tab key from the keyword.
Let's see an example,
.button:focus {
background-color: red;
}
Browser Output
Here, the background color changes from purple to
red when the button is focused.
Style Active State
The active state is triggered when the user actively interacts with elements.
The :active pseudo class selector is used to add styles for the
active state.
Let's see an example,
.button:active {
background-color: red;
}
Browser Output
Here, the background color of the button changes to
red when it is clicked.
Shadow Button
The box-shadow property is used to add shadow to a button. For
example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS shadow button</title>
</head>
<body>
<button class="button1">Normal Button</button>
<button class="button2">Shadowed Button</button>
</body>
</html>
/* styles both buttons */
.button1, .button2 {
background-color: purple;
border: none;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
font-family: "Courier New", Courier, monospace;
color: white;
padding: 20px;
margin-left: 10px;
text-align: center;
cursor: pointer;
}
/* adds shadow effect to button2 on hover*/
.button2:hover {
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.74);
}
Browser Output
In the above example,
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.74);
creates a shadow around the button when it is hovered over.
Disabled Button
A disabled button can be created using the
opacity property. For example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS disabled button</title>
</head>
<body>
<button class="button1">Normal Button</button>
<button class="button2">Disabled Button</button>
</body>
</html>
.button1, .button2 {
background-color: purple;
border: none;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
font-family: "Courier New", Courier, monospace;
color: white;
padding: 20px;
margin-left: 10px;
text-align: center;
cursor: pointer;
}
/* disables button2 on hover*/
.button2:hover {
opacity: 0.4;
cursor: not-allowed;
}
Browser Output
The above example shows two buttons: normal and disabled.
Note: The cursor property allows to add different types of cursor while hovering over the element.
Animated Button
We can add different animation effects to our button to enhance the user experience. For example,
/* adds animation effect to button2 on hover*/
.button2:hover {
bottom: 12px;
}
Browser Output
The above example shows a normal and animated button.
CSS Button Example
Let's look at the various styled button examples,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Button Styling</title>
</head>
<body>
<button class="button button1">Button 1</button>
<button class="button button2">Button 2</button>
<button class="button button3">Button 3</button>
<button class="button button4">Button 4</button>
<button class="button button5">Button 5</button>
</body>
</html>
.button {
color: white;
border: none;
cursor: pointer;
font-weight: bold;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
margin-right: 10px;
padding: 12px 18px;
border-radius: 4px;
}
.button1 {
background-color: purple;
}
.button1:hover {
box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.44);
}
.button2 {
color: black;
border: 1px solid black;
transition: all 0.4s ease;
}
.button2:hover {
background-color: red;
color: white;
}
.button3 {
background-color: red;
transition: transform 0.5s ease;
}
.button3:hover {
transform: translateY(-5px);
color: black;
}
.button4 {
border-radius: 0px;
background-color: black;
transition: all 0.4s ease;
border: 1px solid black;
}
.button4:hover {
background-color: white;
color: black;
}
.button5 {
background: linear-gradient(to right, orange, red);
transform: all 0.3s ease;
}
.button5:hover {
background: linear-gradient(to right, red, orange);
}
.button:active {
color: black;
}
Browser Output
The above example shows different CSS styled buttons.