Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mr. DownsWeb Design IIB BlockTutorial – Custom Buttons CSS/HTMLThis Tutorial covers the CSS and HTML of making your own cu...
.cssnav a{display: block;color: #000000;font-size: 11px;width: 150px;height: 50px;display: block;float: left;color: white;...
<div class="cssnav"><a href="index.html" title="Search EngineOptimization"><img src="button3.png" alt="Search Engine Optim...
Upcoming SlideShare
Loading in …5
×

Rollover button tutorial

139 views

Published on

Published in: Technology
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/HjV5hT ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Rollover button tutorial

  1. 1. Mr. DownsWeb Design IIB BlockTutorial – Custom Buttons CSS/HTMLThis Tutorial covers the CSS and HTML of making your own custom button, as seen inthe picture above. (Left)________________________________________________________________________CSS: Below is the CSS code. Notice that the button used in this code is only thebackground, while the actual button on top of that layer will be placed into the HTMLcode. In other words, the image “button4.png” is the image that appears when yourollover the button with your mouse. The code below also can format the size of yourbutton as it appears on your page, which is done in the first section of the code. The CSScode below can go anywhere within the internal CSS section of your code. Make surenot to interrupt any other existing code and end this, if it is not there already, with the tagof <style>. Take time to perfect the code below for it will decide all the details of thebutton, from text to size..cssnav{position: relative;font-family: arial, helvetica, sans-serif;background: url(button4.png) no-repeat;white-space: nowrap;display: block;width: 150px;height: 50px;margin: 0;padding: 0;}
  2. 2. .cssnav a{display: block;color: #000000;font-size: 11px;width: 150px;height: 50px;display: block;float: left;color: white;text-decoration: none;}.cssnav img{width: 150px;height: 50px;border: 0}* html a:hover{visibility:visible}.cssnav a:hover img{visibility:hidden}.cssnav span{position: absolute;left: 35px;top: 15px;margin: 0px;padding: 0px;cursor: pointer;}HTML: This is the HTML section of the code. This can go into any div class of yourwebpage, but is most commonly used in the left column. The code below is just thesimplified version, the bolded text applies to just one button, but this code can berepeated multiple times for different buttons. The two tags on each side of the boldedcode are just opening and closing tags. The “title” section is purely the name of the linkyou are going to, but is not official. The “span” section is the actual text which willappear on the button. The “alt” section is just the same name as title. Be careful whenputting the text together below, and don’t forget the opening and closing tags. Also, ifnot already there, don’t forget to put in the ending div tag “</div>.”<!--MAIN NAVIGATION START-->
  3. 3. <div class="cssnav"><a href="index.html" title="Search EngineOptimization"><img src="button3.png" alt="Search Engine Optimization"/><span>Home</span></a></div><!--MAIN NAVIGATION END-->This is the end of this Tutorial.

×