Links and buttons are essential components of web design that allow users to interact with a website. In this guide, we’ll cover the basics of styling links and buttons in CSS.
Styling Links
Links are commonly used to navigate between pages or sections of a website. By default, links are underlined and change color when the user hovers over them. You can customize the appearance of links using CSS to make them fit with your website’s design.
Changing Link Colors
To change the color of links, you can use the color property in CSS. Here’s an example:
a {
color: #1E90FF; /* set link color to a shade of blue */
}
You can also style the link when the user hovers over it by using the :hover pseudo-class:
a:hover {
color: #FF4500; /* set link color to a shade of orange when the user hovers over it */
}
Removing Link Underlines
To remove the underline from links, you can use the text-decoration property and set it to none. Here’s an example:
a {
text-decoration: none; /* remove underline from links */
}
Adding Link Underlines on Hover
You can also add an underline to links when the user hovers over them by using the :hover pseudo-class and setting the text-decoration property to underline. Here’s an example:
a:hover {
text-decoration: underline; /* add underline to links when the user hovers over them */
}
Styling Visited Links
By default, visited links have a different color than unvisited links. You can customize the appearance of visited links using the :visited pseudo-class. Here’s an example:
a:visited {
color: #8A2BE2; /* set color of visited links to a shade of purple */
}
Note that some browsers may limit the customization of visited links for security reasons.
Styling Buttons
Buttons are used to trigger an action or submit a form. In HTML, you can create a button using the <button> element or the <input> element with a type attribute of “button”, “submit”, or “reset”. You can style buttons using CSS to match your website’s design.
Changing Button Colors
To change the color of a button, you can use the background-color property. Here’s an example:
button {
background-color: #1E90FF; /* set background color of button to a shade of blue */
}
Changing Button Text Colors
To change the color of the text inside a button, you can use the color property. Here’s an example:
button {
color: #FFF; /* set text color of button to white */
}
Adding Border to Buttons
To add a border to a button, you can use the border property. Here’s an example:
button {
border: 1px solid #1E90FF; /* add a 1px solid blue border to the button */
}
Styling Button Hover and Active States
You can change the appearance of a button when the user hovers over it or clicks on it by using the :hover and :active pseudo-classes. Here’s an example:
button:hover {
background-color: #FF4500; /* set background color of button to a shade of orange when the user hovers over it */
color: #FFF; /* set text color of button to white when the