How to create dynamic button using image background

Dynamic ButtonThe weakness of using the image button is:
First, when web designers want to change the words on the button it will take a very long time to replace it again because the image is necessary to edit again.
Second,
Designers need to create a web button image one by one according to the words on the button.
Third,
the file size will be larger so that it will make loading much longer.

Sorry, we do not refuse if I use the image as a button for the beauty of your site, but if your site has a lot of navigation should use as a background image on the button and the words on the button using a dynamic text that you work more practical and efficient.

Okay, to create a dynamic Button,  I will show you how:

  • Make 2 pieces on the image to photoshop background in accordance with the button you wish, in this case I cite like this:
    button-bg

    button-left-bg

  • Then, create a navigation menu with HTML, for example:

<ul id=”inline-button”>
<li> <a href=”http://gusdwi.info”> <span>Home</span></a> </li>
<li> <a href=”http://gusdwi.info/tentang-gusdwi/”> <span>About Me</span> </a> </li>
<li> <a href=”http://freetemplatedesign.blogspot.com/”>  <span>Free Template Design</span></a> </li>
</ul>

  • And make a CSS code like this:

#inline-button {
margin:1em 0 0 0;
padding:0;
list-style:none;
text-align:left;
}
#inline-button li {
margin: 0 0 0 0;
list-style:none;
display:inline;
padding:0;
}
#inline-button li a {
background:  url(../images/button-left-bg.gif)no-repeat left top;
font-size:1.3em;
margin:0 0 0 0 ;
padding:0.3em 0 0.5em 0;
text-decoration:none;
}

#inline-button li a span {
background:  url(../images/button-bg.gif)no-repeat right top;
margin:0 0 0 1em;
padding:0.3em 1em 0.5em 0;
color:#330000;}

The result will be as below:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *