How to Make a Button in CSS


The buttons on your web pages, when left unstyled, are likely to appear different in every browser. You can improve your Web designs using cascading style sheet (CSS) code to match buttons to the rest of your site. The two button-creating tags -- <button> and <input> -- can take any CSS property you would use on most other HTML elements, such as paragraphs and <div> boxes. More advanced tricks in CSS Level 3 (CSS3), such as gradient backgrounds and drop shadows, let you create buttons without opening a graphics editing program.

  • Write the HTML code to make a button appear on your Web page. You can use either the <button> tag or the <input> tag, but the <input> tag is better if you're adding buttons to forms. The button tag looks like this:

    <button>Button Text</button>

    Put the text you want to display on the button between the <button> tags. This is different than the <input> tag, which requires you to set the <type> attribute to "submit" and the "value" attribute to the text you want on the button. Here's an <input> example:

    <input type="submit" value="Click Here!" />

  • Open the style sheet for your website in your code editor. Add <style> tags and write your CSS code between them if you do not have a style sheet or know how to create one. Write a selector in CSS to "select" the <button> or <input> tag like so:

    button {}

    Write an "attribute" selector for <input> instead of selecting by the <input> tag itself, because your form will include <input> tags for text fields as well. Here's the "attribute" selector:

    input[type="submit"] {}

  • Use CSS code to style the button as you like. Set the background to a new color, image or even a gradient. Remove the default border and change it to something you prefer, such as a rounded border, using "border-radius." Set the "box-shadow" property to add a drop shadow. Here is an example:

    button {

    background: #ff0000;

    color: #ffffff;

    border: 0px;

    border-radius: 10px;


    The above code creates a red button with white text, no border and round corners.

Tips & Warnings

  • Apply a drop shadow to the button, then use the ":active" pseudo-class to remove the drop shadow when the user clicks the button.
  • Apply a gradient background in CSS and then use the ":hover" pseudo-class to apply a reverse gradient when someone hovers over the button. This creates a slick highlighting effect.
  • Internet Explorer versions 8 and below lack support for most CSS3 techniques, and Internet Explorer 9 is limited in its support. Use fall-back JavaScripts, extra style sheets and images to make your buttons compatible across many different browsers.


  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet


Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!