With CSS3, it’s super easy to take a boring, un-styled link, like this:
and turn it into a beautiful, customized button, like this:
All it takes is a little bit of styling. To start, you’re going to need some basic <a> tags. Remove the default link styling (the color and the underline), and add a background-color, some padding, and maybe even a border-radius. Here’s what the CSS might look like:
- text-decoration: none;
- color: #fff;
- background-color: #338d74;
- border-radius: 3px;
- padding: 5px 7px;
- font-family: 'Open Sans';
Now your button probably looks like the one in the image above. To add a little more dimension to the element, give it a linear-gradient background.
- background: linear-gradient(#68b6a0, #338d74);
Now that you have your finished product, try to customize it even more. Use animations, box-shadows, borders, and/or hover effects to really make it your own.