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:
Join us in our newest publication:
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.