Hi all,
I am developing a webapp and am having trouble figuring out how to define the button highlight size when it is selected. Attached is a photo of the selected state of one of the buttons. I am using iwebkit for most of the site UI, but have created two custom CSS3 buttons. The buttons work, but the highlighted region is strange, it's just a screen-width rectangle. How can I get the highlighted region to be the same shape/size as the actual button?
Thanks in advance,
Cory
From styles.css:
From index.html:
I am developing a webapp and am having trouble figuring out how to define the button highlight size when it is selected. Attached is a photo of the selected state of one of the buttons. I am using iwebkit for most of the site UI, but have created two custom CSS3 buttons. The buttons work, but the highlighted region is strange, it's just a screen-width rectangle. How can I get the highlighted region to be the same shape/size as the actual button?
Thanks in advance,
Cory
From 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>