Wikidot Design & Development

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.

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.