Styling Links as Buttons with CSS3

Datetime:2016-08-23 03:06:39          Topic: CSS3           Share

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:

to this:

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:

a.button{
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.





About List