CSS Jelly Buttons

Jelly Fish

Jelly Fish

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.

Jelly Button

  1. First, create the HTML with an anchor element. Let’s start with:

    <a href="#" title="My Cute Little Jelly Button">Jelly Button</a>
    

    Example:

  2. Ever notice that jelly buttons look like they have a smaller rectangle within a rectangle? Let’s add a span element inside the anchor element.

    <a href="#" title="My Cute Little Jelly Button"><span></span>Jelly Button</a>
    

    Example:

  3. Next, let’s add a class attribute to the anchor so that we can refer to it with CSS.

    <a class="jellybutton" href="#" title="My Cute Little Jelly Button"><span></span>Jelly Button</a>
    

    Example:

  4. 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:

    Jelly Button

  5. 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:

    Jelly Button

  6. Now it’s starting to look a little three dimensional! The final step is styling the span to make it look jelly-like. Remember, we had used a gradient and border-radius on the anchor element? 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:

    Jelly Button

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.

Be Sociable, Share!

2 Comments

  1. pengp wrote:

    thank you !!

    Friday, June 4, 2010 at 7:13 am | Permalink
  2. strimble wrote:

    You're very welcome! :)

    Sunday, August 8, 2010 at 10:25 pm | Permalink

Post a Comment