Styling Links as Buttons with CSS3

Published June 23, 2016 by CSS Newbies.

With CSS, it’s easy to turn any a tag into a stylish button. In less than 10 lines of CSS, you can go from this:

Screen Shot 2016-06-21 at 2.58.45 PM

to this:

Screen Shot 2016-06-21 at 2.58.21 PM

All you need to do is get rid of the default text-decoration (underline), add some padding, a background color, a slight border-radius, and a box shadow. Here’s an example of how the code should look:

text-decoration: none;
padding: 5px 10px;
border-radius: 3px;
background-color: #5354a3;
color: #fff;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);

Tweak the styling to your liking to customize the look and dimension of your own buttons.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>