Button changes color after click css
Each link has five different states: Show
I'm guessing you want to achieve a different style on either
A recommended order in your CSS to not cause any trouble is the following:
You can use your web browser's developer tools to force the states of the element like this (Chrome->Developer Tools/Inspect Element->Style->Filter :hov): Force state in Chrome Developer Tools 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. Table of Contents
Let's get started! ADVERTISEMENT How to Create a Button in HTMLTo 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 ADVERTISEMENT 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 ADVERTISEMENT 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. ADVERTISEMENT 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 ADVERTISEMENT 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 started |