CSS Buttons Infographic

CSS Button Infographic

 Download a copy of the "CSS Buttons" Infographic

Download a Copy of the Infographic


CSS Buttons – Cheat Sheet

So you wanna add a button to your web project?  Here’s a little cheat sheet to help you remember all the wonderful ways you can stylize any button with CSS.

Set up

1. Set up your HTML document to include a style section for CSS.

2. Add the button in the body with some HTML.

3. Insert button{} inside the CSS style section. Any declarations you include in this section will style all the buttons in the document.

Examples of Ways You Can Style the Button:

  • Text:
    • Family: button {font-family: Georgia;}
    • Size: button {font-size: 20px;}
    • Color: button {color: #9439de;}
    • Weight: button {font-weight: bold;}
    • Style: button {font-style: italic;}
    • Decoration: button {text-decoration: underline;}
    • Transformation: button { text-transform: uppercase;}
    • Shadow: button {text-shadow: 0px 1px 3px #000000;} /*Vertical Position (X-Axis)| Horizontal Position (Y-Axis) | Blur Radius | Shadow Color */
  • Box:
    • Padding: button {padding: 25px 31px 0px 5px;} /*top | right | bottom| left*/
    • Shadow: button {box-shadow: inset 0px 1px 3px 2px #666666;} /*Position (in or out of box) | Vertical Position (X-Axis)| Horizontal Position (Y-Axis) | Blur Radius | Spread Radius | Shadow Color */
  • Border:
    • Border: button {border: solid #1f628d 6px;} /* Type | Color | Thickness */
    • Rounded Corner Radius: button {border-radius: 12px 0px 12px 0px;} /*Top Left | Top Right | Bottom Left | Bottom Right */
      • -webkit-border-radius: 28;
      • -moz-border-radius: 28;
    • Background:
      • Solid Color: button {background-color: #691545;}
      • Gradient: button { background-image: linear-gradient (to bottom, #0099FF, #0A4166 ); } /* Type of Gradient | (Direction | 1st Color | 2nd Color)*/

Vendor Prefixed Properties for Gradients (http://www.impressivewebs.com/css3-linear-gradient-syntax/)

  • background-image: -webkit-linear-gradient (top, #0099FF, #0A4166); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  • background-image: -moz-linear-gradient (top, #0099FF, #0A4166); /* Firefox 3.6 – 15 */
  • background-image: -o-linear-gradient (top, #0099FF, #0A4166); /* Opera 11.1 – 12 */
  • background-image: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#0A4166)); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */

Why specify the browser types? CSS gradients are an unfinished CSS feature. The way browsers read and create CSS gradients is not standardized across every browser.  To compensate, for now the best way to ensure your gradients look the way you intended them to look across multiple browsers is to use targeted vendor prefixes.

Here are some vendor prefixes (https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way)

  • The-webkit- prefixed property for WebKit-based browsers such as Chrome and Safari
  • The-moz- prefixed property for Firefox
  • The-ms- prefixed property for Internet Explorer
  • The-o- prefixed property for Opera

Types of Gradients (http://www.w3schools.com/css/css3_gradients.asp):

    1. Linear Gradients (goes down/up/left/right/diagonally)
    2. Radial Gradients (defined by their center)
  • Transparent: button {background-color: transparent;}
  • Image/texture behind: button {background: #eeeeee url(‘../image/button.png’) no-repeat;} /* Fallback Color | URL Path to the Image File| Repeat/Placement Options */

TIP: The “background” property is a shortcut for (http://stackoverflow.com/questions/10205464/what-is-the-difference-between-background-and-background-color):

1 – background-color
2 – background-image
3 – background-position
4 – background-repeat
5 – background-attachment
6 – background-clip
7 – background-origin
8 – background-size

  • Interaction:
    • Hover: button:hover {background-color: red; cursor: pointer;}
    • Click: button:active {background-color: red;}

Example Button and Source Code:

Styled Button Example


HTML and CSS for Beginners (with HTML5)Ready to take your CSS skills to the next level of awesome?!  Take complete control over your web creations – sign-up today for HTML & CSS for Beginners (with HTML5), no experience is required.  Course includes:

  • Over 30 Instructional Videos
  • Private Comments Section for Q&A
  • Progress Tracking
  • Downloadable Labs and Solutions
  • Certification Options
  • Life-Time Access
  • 30-Day Money Back Guarantee

Topics include: Text Markup, Lists, Links, Images, Audio, Video, Tables, Forms, and more…. Click HERE to find out more.

Be the first to comment

Leave a Reply

Your email address will not be published.