Webapp Button Selected State Issue

hi all,

developing webapp , having trouble figuring out how define button highlight size when selected. attached photo of selected state of 1 of buttons. using iwebkit of site ui, have created 2 custom css3 buttons. buttons work, highlighted region strange, it's screen-width rectangle. how can highlighted region same shape/size actual button?

in advance,

cory

styles.css:

code:

/* main menu buttons, browse */  #browse{height: 60px; width: 150px; position: relative; left: -76px;top: 18px; z-index: 1; background:-webkit-gradient(linear,      left bottom,      left top,      color-stop(1, rgb(154,188,198)),      color-stop(0.55, rgb(46,178,190)),      color-stop(0.45, rgb(13,163,183)),      color-stop(0, rgb(13,115,156))); moz-border-top-left-radius: 8px;border-top-left-radius: 8px; moz-border-bottom-left-radius: 8px;border-bottom-left-radius: 8px;}  #browse:hover{height: 60px; width: 150px;position: relative; left: -76px;top: 18px; z-index: 2;background:-webkit-gradient(      linear,      left bottom,      left top,      color-stop(1, rgb(117,117,117)),      color-stop(0.5, rgb(0,0,0)),      color-stop(0, rgb(117,117,117)));}  #browse:active{height: 60px; width: 150px;position: relative; left: -76px;top: 18px; z-index: 3;background:-webkit-gradient(      linear,      left bottom,      left top,      color-stop(1, rgb(117,117,117)),      color-stop(0.5, rgb(0,0,0)),      color-stop(0, rgb(117,117,117)));}      /* main menu buttons, create */  #create{height: 60px; width: 150px; position: relative; left: 76px; top: -42px; z-index: 1; background:-webkit-gradient(linear,      left bottom,      left top,      color-stop(1, rgb(159,198,154)),      color-stop(0.55, rgb(71,192,79)),      color-stop(0.45, rgb(13,183,30)),      color-stop(0, rgb(13,157,35))); moz-border-top-right-radius: 8px;border-top-right-radius: 8px; moz-border-bottom-right-radius: 8px;border-bottom-right-radius: 8px;}  #create:hover{height: 60px; width: 150px;position: relative; left: 76px; top: -42px; z-index: 2;background:-webkit-gradient(      linear,      left bottom,      left top,      color-stop(1, rgb(117,117,117)),      color-stop(0.5, rgb(0,0,0)),      color-stop(0, rgb(117,117,117)));}  #create:active{height: 60px; width: 150px;position: relative; left: 76px; top: -42px; z-index: 3;background:-webkit-gradient(      linear,      left bottom,      left top,      color-stop(1, rgb(117,117,117)),      color-stop(0.5, rgb(0,0,0)),      color-stop(0, rgb(117,117,117)));}  

from index.html:

code:

<div align=center>      <a style="text-decoration: none;" href="index.html">  <div id="browse"><span style="position: relative;   top: 11px;text-align:center;font-size:30px; color: white;   font-weight:bold;text-shadow: 0px -1px 1px #000">browse</span></div>   </a>       <a style="text-decoration: none;" href="index.html">   <div id="create"><span style="position: relative;   top: 11px;text-align:center;font-size:30px; color: white;   font-weight:bold;text-shadow: 0px -1px 1px #000">create</span></div>   </a>  </div>

 

attached files:

• 

  selectedstate.jpg

  file size:

  9.7 kb

  views:

  142

Forums Special Interests Web Design and Development

• iPhone
• Mac OS & System Software
• iPad
• Apple Watch
• Notebooks
• iTunes
• Apple ID
• iCloud
• Desktop Computers
• Apple Music
• Professional Applications
• iPod
• iWork
• Apple TV
• iLife
• Wireless