Styling Links as Buttons with CSS3

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:

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More

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:

  1. a.button{
  2. text-decoration: none;
  3. padding: 5px 10px;
  4. border-radius: 3px;
  5. background-color: #5354a3;
  6. color: #fff;
  7. 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);
  8. }

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

Share and Enjoy !

0 0