Recreating the feedback site's bug/wish button

24 Jun 2010 05:56

24 Jun 2010 05:56

Recreating the feedback site's bug/wish button

Adding some interactivity to an otherwise static image using CSS.

Every time I visit the wikidot feedback site I expect some sort of user interaction from the bug/wish toggle button in the sidebar - instead it is a static image. So I decided to recreate the button with CSS. Below you can see the original image on the left versus the pure CSS version on the right. By hovering over or clicking the button, you can see how the CSS version adds some user interaction.

bug-wish-feedback.png

bugs wishes

The Markup

There are four main classes used to create the button: two ‘states’ for the toggles - link vs current; and two ‘positions’ - left and right, to maintain the curved corners on the correct side.

[[div class="bug-button"]]
[[span class="current left"]]bugs[[/span]] [[span class="link right"]][[[css3:wish-bug-button | wishes]]][[/span]]
[[/div]]

Using these classes means that by simply swapping the ‘state’ classes while maintaining the ‘position’ classes allows for changing the state of the toggle without having to change the CSS. You'll see in the CSS below that the styles are added only to the span element for the current state, but are added to the anchor (a) element in the link state.

The CSS

While I won’t go through the specifics of the entire CSS, there’s a couple of things I want to point out. To keep the code clean and easier to read, I’ve only included webkit definitions for CSS3 properties. You can see the entire CSS code on the demo page.

When you look at the original image, the link state has a larger box shadow that spreads onto the current state. To achieve this effect I employed a larger z-index on the link class to ensure that the link always appears on top of the current state, no matter which side it is on.

.bug-button .current  {
    position: relative;
    z-index: 5;
}
.bug-button .link a {
    position: relative;
    z-index: 10;
}

I also used separate margins for the left & right states of the link class to push the link 1px over the current state, otherwise you get two borders next to each other, which is not how the original image appeared. I also switch the box shadow to a negative value for the right link so it appears over the current state and not off the edge of the button. You can also see here how the rounded borders are maintained by declaring only the left border-radius values for the left class and vice versa.

.bug-button .link.left a {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    margin-right: -1px;
    -webkit-box-shadow: 1px 0 4px rgba(0,0,0,0.6);
}
.bug-button .link.right a {
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    margin-left: -1px;
    -webkit-box-shadow: -1px 0 4px rgba(0,0,0,0.6);
}

The remainder of the code consists of CSS gradients, box shadows and border-radius to achieve the desired effect.

.bug-button {
    display: inline-block;
    height: 40px;
    width: auto;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.5);
    font-size: 23px;
    margin-bottom: 60px;
}
.bug-button .current  {
    height: 35px;
    width: 100px;
    position: relative;
    float: left;
    margin: 0;
    text-align: center;
    border: 1px solid #242424;
    background-color: #838383;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#838383), to(#aeaeae));
    padding-top: 15px;
    display: block;
    color: #ececec;
    text-shadow: 0 -1px 0 #444;
    z-index: 5;
}
.bug-button .current.left  {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
}
.bug-button .current.right  {
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}
.bug-button .link a {
    float: left;
    height: 35px;
    width: 100px;
    position: relative;
    float: left;
    margin: 0;
    text-align: center;
    border: 1px solid #6a6a6a;
    background-color: #e7e7e7;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e7e7e7), to(#bbb));
    padding-top: 15px;
    width: 100px;
    display: block;
    color: #343434;
    text-shadow: 0 1px 0 #ececec;
    z-index: 10;
}
.bug-button .link.left a {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    margin-right: -1px;
    -webkit-box-shadow: 1px 0 4px rgba(0,0,0,0.6);
}
.bug-button .link.right a {
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    margin-left: -1px;
    -webkit-box-shadow: -1px 0 4px rgba(0,0,0,0.6);
}

Hover & active pseudo classes are used to add interaction with the button. When the user hovers of the link, the gradient becomes slightly lighter, and when the link is clicked the gradient becomes darker, giving the impression it is actually being depressed.

.bug-button .link a:hover {
    background-color: #ccc;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e7e7e7), to(#ccc));
}
.bug-button .link a:active {
    background-color: #aeaeae;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#838383), to(#aeaeae));
    -webkit-box-shadow: none;
    border: 1px solid #242424;
}

So there you have it, recreating an image with pure CSS which adds user interaction for both the hover & active states.

Image vs CSS

While there is still merit for using an image instead of CSS, mainly because of cross browser compatibility, the use of pure CSS should be considered. It can significantly reduce page load times when used to replace images, while producing near identical results in modern browsers. Pure CSS can even add to the user experience by incorporating interactive hover & active states much easier than using an image sprite. As you can see below, the CSS button still maintains its style as a toggle, as well as the interactive states, when viewed in older browsers (while not being as visually appealing as an image).

button in older browsers

Whether you use an image or CSS really depends on the situation at hand and personal preferences - both have their merits and downfalls. What do you think - image or CSS? Let us know in the comments below…

View Demo & Code

Enjoy the article? Tweet it!

tags — button gradient image pure-css toggle

Discussion - No comments yet…5 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Help: wiki text quick reference
_archive2010buttongradientimagepure-csstoggle
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.