I keep seeing these nice looking jelly button images, but I was wondering if there’s a decent way of creating these jelly buttons without using images. Since CSS3 is now becoming popular, I decided to try to create one just using HTML and CSS3. So, if you would like to create a 3D looking jelly button like the one below, read on.
-
First, create the HTML with an
anchorelement. Let’s start with:<a href="#" title="My Cute Little Jelly Button">Jelly Button</a>Example:
-
Ever notice that jelly buttons look like they have a smaller rectangle within a rectangle? Let’s add a
spanelement inside theanchorelement.<a href="#" title="My Cute Little Jelly Button"><span></span>Jelly Button</a>Example:
-
Next, let’s add a
classattribute to theanchorso that we can refer to it with CSS.<a class="jellybutton" href="#" title="My Cute Little Jelly Button"><span></span>Jelly Button</a>Example:
-
Time to start the CSS! Let’s start by creating a box:
<style type="text/css"> a.jellybutton { position: relative; display: block; width: 150px; padding: 5px; border: 1px solid #555; background: #481525; color: #FFF; text-align: center; } </style>Example:
-
Let’s add some spiffy CSS3 styles. By adding a linear gradient and rounding the corners, it will look more like a button.
Creating rounded corners is pretty simple with the syntax for border-radius.
You can use a gradient in the CSS anywhere where you would normally use an image, such as in a background. Below is the syntax. More information is available about this over at the Surfin’ Safari site. Below, we have designated a light color on the top and a dark color on the bottom.
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)We’re also using RGBA for the gradient. This currently only seems to work in Webkit browsers, like Safari and Google Chrome, and Firefox.
<style type="text/css"> a.jellybutton { position: relative; width: 150px; text-align: center; padding: 5px; display: block; border: 1px solid #555; background: #481525 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.5)), to(rgba(0, 0, 0, 0.5))); color: #FFF; -webkit-border-radius:7px; } </style>Example:
-
Now it’s starting to look a little three dimensional! The final step is styling the
spanto make it look jelly-like. Remember, we had used a gradient and border-radius on theanchorelement? Well, we’re just doing the same thing here. The gradient is white on the top with a 0.5 alpha, which is like saying 50% opacity, and it is completely transparent at the bottom.<style type="text/css"> a.jellybutton { position: relative; width: 150px; text-align: center; padding: 5px; display: block; border: 1px solid #555; background: #481525 -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.5)), to(rgba(0, 0, 0, 0.5))); color: #FFF; -webkit-border-radius:7px; } a.jellybutton span { position: absolute; top: 0; left: 2px; width: 156px; height: 50%; display: block; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); -webkit-border-radius: 7px; } </style>Example:
Well, there you have it folks! A purely CSS jelly button — without the use of an image. I suspect that this might make page load a little quicker without having to download a resource for a jelly button image on the client.
Also, please remember that because of the use of CSS3, this currently only works in Webkit browsers, such as Safari and Google Chrome.

