Style Buttons Using CSS3

With CSS3, it’s super easy to take a boring, un-styled link, like this: Screen Shot 2016-03-07 at 2.21.08 PM

and turn it into a beautiful, customized button, like this:

Join us in our newest publication:

Screen Shot 2016-03-07 at 2.21.24 PM

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:

  1. a{
  2. text-decoration: none;
  3. color: #fff;
  4. background-color: #338d74;
  5. border-radius: 3px;
  6. padding: 5px 7px;
  7. font-family: 'Open Sans';
  8. }

Screen Shot 2016-03-07 at 2.48.26 PM

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.

  1. a{
  2. background: linear-gradient(#68b6a0, #338d74);
  3. }

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.


Share and Enjoy !

0 0