Shiny buttons with CSS3 radial gradients

The current syntax for CSS3 radial gradients is as follows:

radial-gradient(<shape> <size>  at <position-x> <position-y>, <color-stop> [,<color-stops>] )

The older specification was:

radial-gradient(position,size and shape,color stops);

This post is about creating glossy CSS3 buttons with just one partial transparent radial gradient that can be re-used for several colors:

How?

First a few words about the new syntax, it’s alphabetically and is much easier to remember:

1. Shape
2. Size
3. (at) Position
4. , Colorstops (which can be as many as a rainbow)

The size is a Circle or an Ellipse, if you don’t name it explicitly, it automatically will be an Ellipse.

Also sizes can have names:

• ‘closest-side’
  The ending shape is sized so that that it exactly meets the side of the gradient box closest to the gradient’s center. If the shape is an ellipse, it exactly meets the closest side in each dimension. 
• ‘farthest-side’
  Same as ‘closest-side’, except the ending shape is sized based on the farthest side(s).
• ‘closest-corner’
  The ending shape is sized so that that it passes through the corner of the gradient box closest to the gradient’s center. If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if ‘closest-side’ were specified.
• ‘farthest-corner’
  The size will be the horizontal and  vertical radius. You can set them in pixels or em’s etc.  The powerful thing is when you set them as percentages, they will take the percentage of the containing box, so they will keep the right dimension no matter how big or large your button is.

You can set the size also as two values:  horizontal and vertical radius (px, ems etc).  The powerful thing is that when you set them as percentages, they will take the percentage of the containing box. That way they will scale and keep the right dimension no matter how big or large your button or containing element is.

You can’t set  negative sizes but you can set larger sizes then 100%, so it will cover the element over the sides.

The easy way to CSS3 buttons

I created a radial gradient with white transparency, so it can cover any colored background and that color will shine through. The button can be every HTML Element not just buttons.

Forget about shape, and sizes and names in the syntax.

Simply start by setting two values: the horizontal size and vertical size, if you want a circle, make sure they’re equal.  I’ve set horizontal radius larger then 100% so it will cross the shortest sides (left and right) of the button.

background-image: radial-gradient(160% 100%

Remember you don’t have to set the shape. so the next step is to decide where to put them. Those values can also be percentages (of the containing element, so te get them centered at the top at 50% 0% (horizontal, vertical):

background-image: radial-gradient(160% 100% at 50% 0%

Set the colorstops (as many as you want). A colorstop is made of  color-definition and position:

•  color, in hex, rgb(a), or hsl(a), hsl(a) is my favourite you just have to change one value to get a colour lighter or darker
• position, percentage of where the colour should be, 0% at the start, 50% at the middle, and 100% at the end.

If you only set two colors, you don’t need positions, it will be interpreted as start and end.

background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3),hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%, hsla(0,30%,400%,0))

I have set 4 colorstops. You need a bit space between two stops otherwise you get jagged edges. Th rendering  isn’t anti-aliased, I have taken 50%-52%.

That’s all.

You can strip out the first and the last colorstop, they will be interpreted automatically from the other values.

background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%)

Wow, isn’t that some short powerful code.

Opera and Firefox already dropped the prefixes. So the following  code will do everything for all major updated browsers.

.button{
color:white;
display:inline-block;
padding:.5em 1em;
cursor:pointer;
box-shadow:2px 2px 5px hsla(0,0%,0%,.7);
text-shadow:0px 0px 1px hsla(0,0%,0%,.8);
border-radius:5px;
margin:1em;
background-image: -webkit-radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);
background-image: radial-gradient(160% 100% at 50% 0% ,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0) 52%);

}

I would say: no need to make fixes for older browsers, because they were fixed by newer browser versions. Why fix it twice?

People won’t update if everything looks the same in old browsers, they will update (and be more secure), when they see a difference and thus feel a need or wish.

This entry was posted on Thursday, November 1st, 2012 at 5:19 pm and is filed under Webtechnology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.