Warning: curl_init() has been disabled for security reasons in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 95

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 97

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 98

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 100

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 103

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 106

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 333

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 334

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 363

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 370

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 375

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 376

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 377

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 379

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 382

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 150

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 151

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 159

Warning: curl_exec() has been disabled for security reasons in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 162

Warning: curl_errno() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 167

Warning: curl_errno() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 167

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 181

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 182
How to create dynamic button using image background | Gusdwi.info

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 *