There are so many different ways to create stylish buttons with HTML and CSS. All you need is an <a> tag or two to get started. It’s also fairly easy to create animated buttons that actually appear to push down when they are pressed — this can be done completely with CSS, no jQuery or JavaScript necessary!
Creating the Buttons
To create the buttons, you’ll need a few <a> tags (you don’t have to use <a> tags, but if you want your buttons to be able to link to something, it makes sense to create them this way). The HTML for your buttons should look something like this:
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
<a href="#" class="button purple">Purple Button</a> <a href="#" class="button red">Red Button</a> <a href="#" class="button green">Green Button</a> <a href="#" class="button pink">Pink Button</a>
Here’s how that appears without any added styling:
To turn them into buttons, we’re going to need to use some CSS.
Styling the Buttons
What’s great about making buttons this way is that the color, font-style, size, and even shape is completely up to you. It’s all customizable. Use the style rules below as an inspiration to creating your own unique buttons to reflect your design sense or the design sense of the project you’ve been working on. Just make sure you include the border-bottom properties in some capacity if you plan to animate the buttons.
a.button{
text-decoration: none;
text-transform: uppercase;
color: #fff;
font-size: 20px;
font-weight: bold;
-webkit-transition: all .2s;
transition: all .2s;
padding: 15px 3px;
width: 200px;
text-align: center;
display: block;
border-radius: 3px;
margin-top: 20px;
}
.purple{
background: #9c63d8;
border-bottom: 5px solid #7f52ae;
}
.red{
background: #e3644d;
border-bottom: 5px solid #c75b47;
}
.green{
background: #aed863;
border-bottom: 5px solid #86a74b;
}
.pink{
background: #e38ea4;
border-bottom: 5px solid #c98194;
}
After you add your styling, your <a> tags should start to look a lot more like buttons. Here’s what they look like with the above styling applied to them:
Animating Your Buttons
Here’s the fun part. Using the :active pseudo-selector and the border and transform properties, it’s actually really simple to animate your buttons using only CSS. By taking advantage of the :active pseudo-selector, we can actually make the border-bottom of the buttons decrease when the button is clicked. This little trick, in combination with the transform property which gives the effect a nice, smooth transition, actually makes the button look like it’s being pressed down when it’s clicked (or :active). It’s a neat little faux-animation trick that can be accomplished with pure CSS, and will add a nice dimension to your designs. See below for the code to use to accomplish this animated affect:
.button:active{
-webkit-transform: translate(0px, 5px);
transform: translate(0px, 5px);
border-bottom: 1px solid;
}
This effect is great because it’s simple and so easy to implement, but it can also make a huge difference in your projects and designs and is definitely worth adding if you’re looking to add some dimension and color to your work.
