HTML Button with CSS3: Tiny & Helpful Demo plus Tutorial

If you're a senior web developer, you know that on the big web projects, you have to encounter a situation where you need a coherent set of HTML buttons with different properties for each button, be it in size, color, or both. This CSS button tutorial will guide you how to use CSS3 to apply the HTML buttons then make them become more stylish, amazing.

Or you may try many helpful resources below to build the websites better and faster:
- Great Collection of Extreme CSS3, JavaScript Tutorials
- Beautiful and Stunning CSS3 Animation Experiments
- Design Better HTML5 Form Element Validator
- 35 High-Class JavaScript and jQuery Tutorials for Advance Web Developers


Sampled by © JavaScriptBank.com

---

Demo

General Rules

First, let's set up our general button rules (with a .btn class). We want all our buttons to have a colored background, meaning the inner text will be white. The button should have it's text nice and centered, along with some round corners, a nice top highlight, and a default height.

.btn {
  background: #CCC;
  color: #FFF;
  display: inline-block;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  font-family: Arial, sans-serif;
  line-height: 2.5em;
  padding: 0 3em;
  text-decoration: none;
}

If you want "full" compatibility, remember to add browser prefixes for border-radius and box-shadow, but for simplicity's sake I've left them out here. The box-shadow uses a very subtle, 1px thick value in a semi-transparent white, using an rgba value.

You'll also notice I've set a background color, though it's basically a temporary backup for now. We've set set it to an inline-block element for easier manipulation of properties (line-height won't work properly with the default inline value). With that we can set a line-height, which we've used em for, as well as for some padding on the sides. I've also set the font to Arial, however this is probably not needed unless you want a specific font for just the buttons, otherwise you can remove this line and let it inherit the font you've set globally on the site. At this point, if you were to make some links with the .btn class...

<a href="#" class="btn">Button</a>
<a href="#" class="btn">Button</a>
<a href="#" class="btn">Button</a>
...it would look something like: Initial buttons

Colors

So far so good. However, we don't want a CSS button set to be so plain, we want some color! So let's make a few more classes in our CSS:

.green.btn {
  background: linear-gradient(#6BDB55,#57B245);
  text-shadow: 1px 1px 1px #57B245;
}

.red.btn {
  background: linear-gradient(#D60A0A,#B20808);
  text-shadow: 1px 1px 1px #B20808;
}

.blue.btn {
  background: linear-gradient(#11A1D6,#0E86B2);
  text-shadow: 1px 1px 1px #0E86B2;
}

Here we've made 3 colors, each using a CSS gradient (again, unprefixed, but you can use this handy tool to get the full prefix list) and applying a dark, colored shadow (matching the darkest color in the gradient). You now have a primary color set that - once you apply each class to your buttons in the HTML - would look like:

Buttons with color

Size

Want different sizes? No problem, all we need are some extra classes to adjust our button set's height and padding:

.small.btn {
  line-height: 1.75em;
  padding: 0 1.5em;
}

.large.btn {
  line-height: 3em;
  padding: 0 3.5em;
}

And with that, you can now mix and match your colors with sizes!

Buttons with color and size

States

Last, but not least, it would be a good idea to have some hover (mouse over) and active (mouse down) states. You can do this per color if you felt like it, but we'll take a simpler approach by using an extra shadow as a "fake gradient" across the whole button set (which will also save us various lines of CSS).

.btn:hover { 
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
  inset 0 1.5em 1em rgba(255,255,255,0.3);
}

.btn:active {
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2),
  inset 0 1.5em 1em rgba(0,0,0,0.3);
}

You'll notice we've added a second value (separated with a comma) to our original shadow, but this time apply a bigger shadow, one light and one dark for each state. With this, your button set is ready for action! To play with a live example from this CSS button tutorial, you can check it out here.

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB


Top view articles
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
Best Free Linux Web Programming Editors
Top 10 Best JavaScript eBooks that Beginners should Learn
16 Free Code Syntax Highlighters by Javascript For Better Programming
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com