Male Brazilian Wax- Edmonton Alberta

Web Layout: buttons css 'liquid' energy-saving

When you set up a website, or an application, the buttons are a fundamental part, allow the user to make their own choices. Usually we use the classic

\u0026lt;input type = "button" value = "I am a button" />

that have more or less like this:

Or, for those who need higher geafiche, custom buttons, made usually with graphics programs like Photoshop.
The latter may have very different shapes and colors, the only limit is your imagination: some examples.
Certainly this offers much more freedom, but still has a major limitation: the reusability.
In the future we want to change the fact that the text of a button, or color, we would be obliged to open the graphics program (photoshop or gimp that is), refresh button, save it, and sovvrascriverlo with the old one via ftp.

addition, if you have many buttons, our users have to download pictures of each of them, sometimes slowing down the loading time of the page.

There is a third method, which has recently gained popularity (thanks to a bug in IE finally resolved with the PNG).
is to always use only one image (or 3 if we are to our buttons with rounded corners) semi-transparent, then using CSS will change the background color of each button to make it different from others.
So, with one image (think of what will be easy to amend in the future you should update only one image!) you can have endless buttons, simply by changing the background color.

The css of our buttons will then be very simple (eg fast fast):

div.button
{/ * size of the button * /
width: 150px;
height: 24px;
/ * button text * /
color: # DFDFDF;
font-family: "Trebuchet MS";
font-size: 14px;
line-height: 21px;
font-weight: bold;
text-align: center;
/ * this is the 'trick' * /
background-image: url ('button-bg.png');
background-color: # 000000;
/ * for make it more enjoyable, add rounded edges (CSS 3.0) * /
/ * currently, however, are only supported by browsers mozilla / webkit based (firefox, safari, chrome) * /
border-width: 1px 1px 1px 1px;
border -color: # 000000;
border-style: solid;
/ * edges arrotondari for mozilla * /
-Moz-border-radius-bottomright: 4px;
-moz-border-radius-TopRight: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
/ * arrotondari edges for chrome, safari * /
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;}

div.button:
hover {/ * when we go Conlie mouse button, simply change the background color of the font * /
/ * And the shape of the mouse cursor * /
background-color: # 333333;
color: # FFFFFF;
cursor: pointer;}

And the final result on the browser: Firefox
:
Internet Explorer :

Not bad, eh?
and changing only the CSS, we can change the background color (and appearance) of the button, really quickly.

A very well written tutorial on how to best achieve this effect, can be found on Blog soh tanaka, along with some examples with different colors .

Posted by email from KGO