Turning links into buttons

Web Design with HTML & CSS

🕑 This lesson will take about 5 minutes

In this lesson you will learn how to use CSS code to turn a regular link into a button with a mouse-hover effect, like in the example shown below.

Animation showing buttons change colour when mouse hovers over

In this example, we will create a class called “btn” which will be applied to all of the links. Some padding will be added to the links as well as a background colour. The border-radius property is used to round the corners and the text-decoration property is set to none to remove the underline from each link. The transition property is also set to 0.5s (half a second) for a gradual transition when the mouse hovers over each link. When the mouse hovers a link, the background colour and text will colour will change, and a box shadow effect will be added.

You can use and modify the HTML and CSS code below to create your own buttons.