Learn how to style buttons using CSS.
Basic Button Styling
Example
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Try it Yourself »
Button Colors
Use the background-color
property to change the background color of a button:
Example
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */
Try it Yourself »
Button Sizes
Use the font-size
property to change the font size of a button:
Example
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Try it Yourself »
Use the padding
property to change the padding of a button:
Example
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Try it Yourself »
Rounded Buttons
Use the border-radius
property to add rounded corners to a button:
Example
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Try it Yourself »
Colored Button Borders
Use the border
property to add a colored border to a button:
Example
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
Try it Yourself »
Hoverable Buttons
Use the :hover
selector to change the style of a button when you move the mouse over it.
Tip: Use
the transition-duration
property to determine the speed of the "hover" effect:
Example
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Try it Yourself »
Shadow Buttons
Use the box-shadow
property to add shadows to a button:
Example
.button1 {
box-shadow: 0 8px 16px 0 rgba[0,0,0,0.2], 0 6px 20px 0 rgba[0,0,0,0.19];
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba[0,0,0,0.24], 0 17px 50px 0 rgba[0,0,0,0.19];
}
Try it Yourself »
Disabled Buttons
Use the opacity
property to add transparency to a button [creates a "disabled"
look].
Tip: You can also add the cursor
property with a value of "not-allowed", which will display a "no parking sign" when you mouse over the button:
Button Width
By default, the size of the button is determined by its text content [as wide as its content]. Use the width
property to change the width of a button:
Example
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
Try it Yourself »
Button Groups
Remove margins and add float:left
to each button to create a button group:
Bordered Button Group
Use the border
property to create a bordered button group:
Vertical Button Group
Use display:block
instead of float:left
to group the buttons below each other, instead of side by side:
Button on Image
Try it Yourself »
Animated Buttons
In this article you'll see how to style a button using CSS. My goal here is mostly to showcase how different CSS rules and styles are applied and used. We won't see much design inspiration nor will we discuss ideas for styling. Instead, this will be more of an overview of how the styles themselves work, what properties are commonly used, and how they can be combined. You'll first see how to create a button in HTML. Then you'll learn how to override the
default styles of buttons. Lastly, you'll get a glimpse of how to style buttons for their three different states. Let's get started! To create a button, use the This is a more accessible and semantic option compared to using a generic container which is created with the In the Let's break down the line Any styles that will be applied to the button will go inside a spearate You can apply the styles to the HTML content by linking the two files together. You do this with the In the Notice that the The code from above will result in the following: The default styling of buttons will vary depending on the browser you're using. This is an example of how the native styles for buttons look on the Google Chrome browser. To change the background color of the button, use the CSS In the The default color of text is black, so when you add a dark background color you will notice that the text has disappeared. Another thing to make sure of is that there is
enough contrast between the button's background color and text color. This helps make the text more readable and easy on the eyes. Next, use the Notice the grey around the edges of the button? That is the default color of the button's borders. One way to fix this is to use the Another way would be to remove the border around the button entirely by using Next, you can also round-up the edges of the button by using the You
could also add a slight dark shadow effect around the button by using the The way to create more space inside the button's borders is to increase the Below I added a value of 15px for the top, bottom, right, and left padding of the button. I also set a minimum height and width, with the Buttons have three different states: It's best that the three states are styled differently and don't share the same styles. In the following sections I'll give a brief explanation on what each one of the states mean and what triggers them. You'll also see some ways you can style the button for each separate state. The To change the button's styles when you hover over it, use the A common change to make with To make the change less sudden, pair The The change of background color will happen a bit slower than it would without the In the example above, I used a Hex color code value to make the background color a lighter shade for when I hover over the button. With the help of the Keep in mind that the The If you're following along, when you focus on the button after pressing the Notice the slight light blue outline around the button when it's gained focus? Browsers have default styling for the You can however create custom styles for it and make it easily detectable. A way to do so is by
setting the outline color to first be Following that, you can maintain the You can also again pair these styles with the The That being said, look at what happens when I click the button after I've applied and
kept the styles for the The The However, keep in mind that they are not the same thing. To change the style for when a user clicks a button, apply styles to the In this case, I've changed the background color of the button when a user clicks on it And there you have it! You now know the basics of how to style a button with CSS. We went over how to change the background color and text color of buttons as well as how to style buttons for their different states. To learn more about web design, check out freeCodeCamp's Responsive Web Design Certification. In
the interactive lessons, you'll learn HTML and CSS by building 15 practice projects and 5 certification projects. Note that the above cert is still in beta - if you want the latest stable version, check here. Thanks for reading and happy coding! Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers.
Get startedTable of Contents
How
to Create a Button in HTML
element.
index.html
file below, I've created the basic structure for a webpage and added a single button:
CSS Button Style
Click me!
Click me!
: and closing
tag.
type="button"
attribute in the opening tag explicitly creates a clickable button. Since this particular button is not used for submitting a form, it is useful for semantic reasons to add it in order to make the code clearer and not trigger any unwanted actions.
class="button"
attribute will be used to style the button in a separate CSS file. The value button
could be any other name you choose. For example you could have used class="btn"
.Click me!
is the visible
text inside the button.style.css
file. tag which was used in
index.html
.style.css
file, I've added some styling which only centers the button in the middle of the browser window.class="button"
is used with the .button
selector. This is a way to apply styles directly to
the button.* {
box-sizing: border-box;
}
body {
display:flex;
justify-content: center;
align-items: center;
margin:50px auto;
}
.button {
position: absolute;
top:50%
}
How to Change the Default Styling of Buttons
How to Change the Background Color of Buttons
background-color
property and give it a value of a color of your taste..button
selector, you use background-color:#0a0a23;
to change the background color of the button..button {
position: absolute;
top:50%;
background-color:#0a0a23;
}
How to Change the Text Color of Buttons
color
property to change the color of text:.button {
position: absolute;
top:50%;
background-color:#0a0a23;
color: #fff;
}
How to Change the Border Style of
Buttons
border-color
property. You set the value to be the same as the value of background-color
. This makes sure the borders have the same color as the background of the button.border:none;
..button {
position: absolute;
top:50%;
background-color:#0a0a23;
color: #fff;
border:none;
}
border-radius
property, like so:.button {
position: absolute;
top:50%;
background-color:#0a0a23;
color: #fff;
border:none;
border-radius:10px;
}
box-shadow
property: position: absolute;
top:50%;
background-color:#0a0a23;
color: #fff;
border:none;
border-radius:10px;
box-shadow: 0px 0px 2px 2px rgb[0,0,0];
How to Change the Size of Buttons
padding
of
the button.min-height
and min-width
properties respectively. Buttons need to be large enough for all different kind of devices..button {
position: absolute;
top:50%;
background-color:#0a0a23;
color: #fff;
border:none;
border-radius:10px;
padding:15px;
min-height:30px;
min-width: 120px;
}
How to Style Button States
:hover
:focus
:active
How to Style
:hover
States :hover
state becomes present when a user hovers over a button, by bringing their mouse or trackpad over it, without selecting it or clicking on it.:hover
CSS
pseudoclass selector.:hover
is switching the background-color of the button.:hover
with the transition
property.transition
property will help make the transition from no state to a :hover
state much smoother.transition
property. This will also help make the end result less jarring for the user..button:hover {
background-color:#002ead;
transition: 0.7s;
}
transition
property I also caused a delay of 0.7s
when the transition from no state to a :hover
state happens. This caused a slower transition from the original #0a0a23
background color to the #002ead
background color.:hover
pseudoclass does not work for mobile device screens and mobile apps. Choose to use hover effects only for
desktop web applications and not touch screens.How to Style
:focus
States :focus
state takes effect for keyboard users - specifically it will activate when you focus on a button by hitting the Tab
key [⇥
].Tab
key, you'll see the following::focus
pseudoclass, for accessibility keyboard navigation purposes. It's not a good idea to remove that outline
altogether.transparent
.outline-style
to solid
. Lastly, using the box-shadow
property, you can add a color of your liking for when the element is focused on: .button:focus {
outline-color: transparent;
outline-style:solid;
box-shadow: 0 0 0 4px #5a01a7;
}
transition
property, depending on the effect you want to achieve: .button:focus {
outline-color: transparent;
outline-style:solid;
box-shadow: 0 0 0 4px #5a01a7;
transition: 0.7s;
}
How to Style for the
:active
State :active
state gets activated when you click on the button by either clicking the computer's mouse or pressing down on the laptop's trackpad.:hover
and :focus
states::hover
state styles are applied before clicking when I hover over the button.:focus
state styles are applied also, because when a button is clicked it also gains a :focus
state alongside an :active
one.:focus
state is when an element is being focused on and :active
is when a user clicks
on an element by holding and pressing down on it.:active
CSS pseudoselector..button:active {
background-color: #ffbf00;
}
Conclusion
Can you style a button in HTML?
How do I change my click color?
What is the default color of buttons in HTML?
How do I assign a button in HTML?
, or even ], and use ::after and ::before pseudo-elements for complex rendering.Chủ Đề