Buttons using only CSS

Published by TheJoe on

Estimated reading time: 3 minutes


This article was published more than a year ago, there may have been developments.
Please take this into account.

In today's article we see how to turn a simple form, with a button unformatted in an equally simple form with a formatted button. All colors, gradients and shadows will be “built” using the CSS rules for the version 3. These few simple rules are to take some’ with pliers, because they work perfectly with the browser based on Webkit (Safari, Konquerror, iPad/iPhone) e Gecko (Firefox e simili), but they are useless on all versions of Internet Explorer prior to 9.

Let's start with the HTML. We'll also connect the file “style.css”:

  <link rel="stylesheet" href="style.css" type="text/css" charset ="utf-8" />
  <form action="#">
        <td>Name:</td><td><input type="text" name="name" value=""></td>
        <td>Mail:</td><td><input type="text" name="mail" value=""></td>
        <td colspan="2" align="center"><button id="button">Send</button></td>
  </form><!--end form-->

Without the formatting given by CSS this would be the result “knot and crude”.


1. Home Style

We begin to enter inside our “style.css” the following lines of code to give style to the button:

  width: 100px;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  are: bold 12px Arial, Helvetica, sans-serif;
  color: #fff;
  padding: 10px 20px;
  border: solid 1px #0076a3;
  background: #0095cd;

Meanwhile we give a fixed size, allineamo text in the center without decorations, it's set the font (are), the color (color) and the distances from the other elements (padding). Then we set the background color of the button and the color of the border. This is the result:


2. Gradient background

We could then add a gradient to the background color, to give a three-dimensional. We add the following lines to the element “button” the nostro “style.css”:

background: -webkit-gradient(linear, left top, left bottom, from(#00services), to(#0078a5));
background: -webkit-linear-gradient(top,  #00services,  #0078a5);
background: -moz-linear-gradient(top,  #00services,  #0078a5);
background: -ms-linear-gradient(top,  #00services,  #0078a5);
background: -o-linear-gradient(top,  #00services,  #0078a5);

Of these lines there is little to explain, add a vertical gradient to the background. This is the result:

Look here:  The Time Machine: WebArchive

3. Round the corners

Depending on your preferences we may want to round the corners of the button. We add the following lines to the element “button” the nostro “style.css”:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

It may be useful to understand how these values. You have to play a bit’ to find the desired result. Below is the result:


4. Shadow

To give the final touch of three-dimensionality is necessary to give a slight shading. We add these last lines element “button” the nostro “style.css”:

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);

This is the result:


And now that we have a button with a style you just have to set the classical action on mouse and click. The following lines to add to the file “style.css”:

button:hover {
  background: #0095cd;
  background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00services));
  background: -webkit-linear-gradient(top,  #0078a5,  #00services);
  background: -moz-linear-gradient(top,  #0078a5,  #00services);
  background: -ms-linear-gradient(top,  #0078a5,  #00services);
  background: -o-linear-gradient(top,  #0078a5,  #00services);
  background: linear-gradient(top,  #0078a5,  #00services);

  position: relative;
  top: 1px;

And this is the result of running:


I keep this blog as a hobby by 2009. I am passionate about graphic, technology, software Open Source. Among my articles will be easy to find music, and some personal thoughts, but I prefer the direct line of the blog mainly to technology. For more information contact me.


Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.