Using a button is, so far, the preferred way to interact with an electronic stuff; such as the radio, TV, music player, and even a smartphone that has a voice command feature still needs at least one or two physical buttons.
Furthermore, in this digital age, the button has evolved in its digital form as well, which makes it more interactive, dynamic and real easy to make, compared to the physical button.
So, this time, we are going to create a slick and interactive button which is based on this excellent design over at Dribbble using only CSS.
Well, let’s just get started.
We will start off the button by placing the following markup on our HTML document. It’s really simple, the button would be based on an anchor tag, we also have a span next to it to create the indicator light, and then they are wrapped together within an HTML5section tag.
The power icon that we need for this button is represented in Unicode number F011; if you look closely at the HTML markup above, we have put this numeric character  within the anchor tag, but since we haven’t defined the custom font-family in the button style, the icon is yet to be rendered correctly.
First of all, we need to define the custom font-family for the button.
Our button will be a circle, we can achieve the circle effect using the border-radius property and set the value at, at least, half of the button’s width.
Since, we are using a font for the icon, we can easily set the color and add text-shadow for the icon in the stylesheet as well.
Next, we will also create a beveled effect for the button. This effect is quite tricky. First, we need to apply background-color: rgb(83,87,93); for the button’s color base, then we add up to four layers of box-shadows.
Further reading: CSS :before and :after pseudo-elements (Hongkiat.com)
Under the button, there is a tiny light to designate the Power On and Off status. Below, we apply red for the light’s color because the power is initially OFF, we also add box-shadow to imitate the gleam effect of the light.
At this point our button starts looking good and we only need to add some effects on it, for instance, when the button is ‘being’ clicked on, we want the button to look like it’s being pressed and held down.
To achieve the effect, the first box-shadow in the button will be zeroed and the position will be lowered a bit. We also need to adjust the other three shadows’ intensities a little to match the button position.
The snippet above will add the class ON in the anchor, and we used the toggleClass function from jQuery to add it. So, when the #button is clicked on, the jQuery will check whether the class ON has been added or not: when it is not, the jQuery will add the class, and if it has been added, the jQuery will remove the class.
Note: Don’t forget to include the jQuery library.
Now we have to change the Style a little bit. Simply replace all the :targetpseudo-element with the .on class selector, as follows:
Graphic & web designer; having been about 2 years working as a freelance designer specializing in e-Commerce for retail industries. He also shares his enthusiast in web design at creatiface.com and can be contacted on Twitter @creatiface