Designing a complex button in CSS

Question

I am trying to make buttons using CSS, instead of using image sprites.

These are going to be across the site with different text, so making a large image sprite does not make sense, especially since the size of the buttons vary according to the text.

This is what I've been able to achieve : (very different from the original one)

Fiddle Link

a {
    display: inline-block;
    line-height: 20px;
    text-decoration: none;
    font-family: 'Arial';
    font-size: 19px;
    font-weight: 700;
    color: #ddd;
    padding: 10px 20px;
    border-radius: 5px;
    border: 1px solid #001151;
    text-shadow: 2px 2px 4px rgba(32,70,97,.55);
    background: #002483;
    background: linear-gradient(
      to bottom,
        rgba(0,36,131,1) 0%,
        rgba(0,44,151,1) 27%,
        rgba(0,61,166,1) 55%,
        rgba(15,77,180,1) 82%,
        rgba(23,83,185,1) 100%);
}

P.S. : (Browser Support >= IE9)

Is creating buttons like these possible using only HTML + CSS?

Answer 1

Don't get me wrong, but this button is ugly :). The standard nowdays is to make buttons as simple as possible with very subtle gradients.

Here is my try though, CSS only: http://jsfiddle.net/9CPBY/1/

I have used before to add the reflexion and after to add the spotlight glare.

a:after{
    content:".";
    position:absolute;
    color:transparent;
    width:1px;
    height:1px;
    background:white;
    top:5px;
    left:70%;
    border-radius:10px;
    box-shadow:0px 0px 20px 10px white;
    
}

Gradient generated using ColorZilla's generator.
Only tested in Chrome, should work fine in other browsers too.