CSS Styling Links into stylish Buttons

Links are used for interlinking related webpages. In HTML <a href="URL"...> </a> Anchor tag is used to create hyperlinks. We have already learned how to style a link, based on its state, namely, hover, link, visited and active.

In this tutorial, we will learn how to make the links look like rectangular buttons, just like we see Submit buttons in forms, Next and Previous button at the end of this tutorial, the Live Example hyperlink etc.

If we have two style classes, with different styling rules, we can add both of them together to a single tag. Here is the clickme class,

CSS:

.clickme {
    background-color: #EEEEEE;
    padding: 8px 20px;
    text-decoration:none;
    font-weight:bold;
    border-radius:5px;
    cursor:pointer;
}

Output:

clickme is a styling class which provides some basic styling to a link, like padding, removing the underline etc, to make it look like a simple plain old button. But yes, the main task of converting the link into a button is accomplished.

Live Example →

Now we will add more styling classes on top of the clickme base class, to make colorful buttons.

Red button → .danger class

.danger {
    background-color:#FF0040;
    color: #FFFFFF;
}

.danger:hover {
    background-color:#EB003B;
    color: #FFFFFF;
}

HTML:

<div>
    <a href="http://www.studytonight.com/tests" class="clickme danger">Tests</a>
</div&g

Output:

Go see the combined code live in the Web Playground and even try changing a few css properties.

Live Example →

Finale! The complete CSS Stylish Button set

In this button set, we have added 5 uinque colors, using 5 different css style classes, namely danger, success, warning, info, default.

You can change the colors as per your website theme, or you can even add more color classes to this. Now go to the Web Playground to see the complete code in action.

Output:

Live Example →

We hope you enjoyed this exercise. And do practise on our live Web playground (Link) and share your style projects with us by taking a snaphot of the output, on our Facebook page. Yeah!