1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Css button shows non-hover on hover & hover on non-hover

Discussion in 'HTML & Website Design' started by Lassar, May 31, 2015.

0
  1. #1
    I have been working on a css belcher button.

    My css code works in firefox and chrome. But works just the opposite way in ie and safari.

    The hover state shows in non-hover, and the non-hover on hover.

    

html

  <a class="inner-button" href="http://radiotelephonetutor.com/Paypal.php">
  <div><span></span></div>
  </a>

 
  CSS
 
.inner-button div {
display:inline-block;
position: relative;
width:325px;
height:60px;
border-radius:3px;
border:4px solid #FC0006;
margin: 0 auto;
}

.inner-button span:before {
content:"";
position:absolute;
display:inline-block;
width:312px;
height:39px;
left:0;
right:0;
margin: 0 auto;
bottom:1px;
border-radius:210%/100px 100px 0 0;
background:#FFB014 !important;
background: -moz-linear-gradient(#FFF09B, #FCE237);
background: linear-gradient(#FFE18B, #FFDC22)  !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF09B', endColorstr='#FCE237');
z-index:500 !important;
}

.inner-button span {
display:inline-block;
position:absolute;
width:318px;
height:52px !important;
left:0px;
right:0;
bottom:1px;
margin: 0 auto;
border-top:3px solid #FFFF99;
border-right:3px solid #FF951C;
border-bottom:3px solid #FF951C;
border-left:3px solid #FFFF99;
background:#FFAC0A !important;
z-index:6 !important;
}

.inner-button span:after {
content:"Buy Now";
display:inline;
position:absolute;
left:0;
right:0;
top:9px;
margin:0 auto;
text-align:center;
width:325px;
height:60px;
text-decoration:none;
font-size:34px;
font-weight:bold;
color:#000 !important;
line-height:2rem;
text-shadow:1px 1px 2px #FFF9E5;
z-index:9999 !important;
}

.inner-button:active; {
display:block;
position:relative;
margin:1rem auto;
width:325px;
height:60px;
}

.inner-button div:hover {
border-radius:3px;
border:4px solid #009900;
background:#FFDD81 !important;
}

.inner-button span:hover {
background:#FFDD81 !important;
}
    Code (markup):
    I appreciate any help and insight you have to offer.
     
    Lassar, May 31, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Getting the HTML to validate first would probably be a good idea... You can't have a div inside an a.
    Create the div, put the a inside the div, and if you need, the span inside the a again.
    If you need the a to cover the whole div, then you need to set the a to display: block; and if you don't have any content inside the a, you'll need to define width and height. Do you have an image of what you're trying to achieve?
     
    PoPSiCLe, May 31, 2015 IP
  3. Lassar

    Lassar Member

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    The bottom half button is the non-hover image, and the top half is the hover image.

    [​IMG]
     
    Lassar, May 31, 2015 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Not a 100% complete example, but this is almost the thing you're asking for:
    
<!DOCTYPE html>
   <html>
     <head>
       <title>Testpage</title>
       <style type="text/css">
         .button {
           display: inline-block;
           position: relative;
           width:325px;
           height:60px;
           border:   4px solid #FC0006;
           text-align: center;
           background: #FFAC0A;
           font-size: 2.5em;
           font-family: sans-serif;
           color: #000;
           line-height: 100%;
         }

         .button span {
           display: inline-block;
           width: 100%;
           height: 80%;
           border-radius: 210%/100px 100px 0 0;
           background: #FFB014;
           background: -moz-linear-gradient(#FFF09B, #FCE237);
           background: linear-gradient(#FFE18B, #FFDC22);
           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF09B', endColorstr='#FCE237');
           position: absolute;
           bottom: 0;
           left: 0;
         }
         .button:hover {
           border:4px solid #009900;
         }
         .button:hover span {
           background:#FFDD81;
           background: -moz-linear-gradient(#FFF09B, #FCE237);
           background: linear-gradient(#FFE18B, #FFDC22);
           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF09B', endColorstr='#FCE237');
         }
       </style>
     </head>
     <body>
       <a class="button" href="http://radiotelephonetutor.com/Paypal.php"><span>Buy now</span></a>
       </body>
     </html>
    Code (markup):
    The things that isn't there yet is the following:
    The gradient on the hover needs to be adjusted (I just used the values from the regular button, hence they need to be changed on the button:hover span-rule)
    The border around the inner content - personally, I don't think it should be there, since it looks dated and fugly, but it can be added by using another container (or a wrapping container around the a with the outer border (red/green) and then just adjust the current border on .button to fit your purpose.
     
    PoPSiCLe, Jun 1, 2015 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Laughably HTML 5 removed that rule -- despite that it doesn't work right in ANY browser all the time. (and it pissing on semantics, but again as I've said hundreds of times the WhatWG wouldn't know semantic markup if it bit them in the ass)

    Really though it's a DIV for nothing since it's being set to inline-block; style the ANCHOR instead!

    Much less the lack of text/fallback, goofball positioning nonsense... or that it's so much code just sucking it up and using an image might be more efficient in bandwidth and speed. (Which is when you KNOW you've screwed up!)

    NOT that I'd probably have a class like "inner-button" since I'd be leveraging semantics off the parent if possible or saying WHAT the button is....

    THOUGH, biggest problem is you are targeting :hover off everything EXCEPT the parent anchor, the only element you should be hitting with :hover... (or active or focus)

    I probably would also try to 'sneak by' on using some box-shadow instead of one set of the borders AND the linear-gradients, it's a lot less code bloat cross browser since we only need to target -webkit with that now. Likewise I'd leverage an empty italic or bold tag "sandbag" instead of generated content as trying to target :before the same time as active, focus or hover is a pain -- and don't forget to target active/focus so keyboard navigation gets something meaningful as well...

    So for the markup (keeping a class on it for for now):
    <a class="innerButton" href="#">
	<i></i><span>Buy Now</span>
</a>
    Code (markup):
    Whilst the CSS would go thusly:
    .innerButton {
	position:relative; /* to APO the rounded "sun" thing */
	zoom:1; /* trip haslayout, fix IE positioning bugs */
	display:inline-block;
	overflow:hidden; /* chop off rounded "sun' thing */
	font:bold 200%/120% arial,helvetica,sans-serif;
	margin:4px;
	background:#FC1;
	border:4px solid #090;
}

.innerButton i {
	position:absolute;
	left:50%;
	top:0.3em;
	width:30em; /* three times span width */
	height:30em; /* three times span width */
	margin-left:-15em; /* negative 1/2 this element width */
	/* border radius should be half the width/height */
	-webkit-border-radius:15em;
	border-radius:15em;
	background:#FF4;
	-webkit-box-shadow:
		inset 0 0.8em 0.8em #FFD;
	box-shadow:
		inset 0 0.8em 0.8em #FFD;
}

.innerButton span {
	position:relative; /* depth sort over "sun thing" */
	display:inline-block;
	vertical-align:top; /* prevent oddball alignment issues */
	width:10em;
	padding:0.25em 0;
	color:#000;
	text-align:center;
	border:1px solid;
	border-color:#FB2 #B60 #B60 #FB2;
	-wekit-box-shadow:
		inset 1px 1px #FF4,
		inset -1px -1px #C92,
		inset 5px 0 3px rgba(255,255,128,0.5);
	box-shadow:
		inset 1px 1px #FF4,
		inset -1px -1px #C92,
		inset 5px 0 3px rgba(255,255,128,0.5);
}

.innerButton:active,
.innerButton:focus,
.innerButton:hover {
	background:#FA0;
	border-color:#F00;
}

.innerButton:active i,
.innerButton:focus i,
.innerButton:hover i {
	background:#FD2;
	-webkit-box-shadow:
		inset 0 0.8em 0.8em #FEA;
	box-shadow:
		inset 0 0.8em 0.8em #FEA;
}

.innerButton:active span,
.innerButton:focus span,
.innerButton:hover span {
	-wekit-box-shadow:
		inset 1px 1px #FE2,
		inset -1px -1px #B80,
		inset 5px 0 3px rgba(255,255,64,0.5);
	box-shadow:
		inset 1px 1px #FE2,
		inset -1px -1px #B80,
		inset 5px 0 3px rgba(255,255,64,0.5);
}
    Code (markup):
    Which would give you your little "sun" effect, and proper hover behavior across modern browsers. I REALLY try to avoid linear-gradient for a host of reasons, and using an inset box-shadow instead is so close as to make no realistic difference. (I actually think it matching the curve looks better!)

    I also eyeballed the colors instead of copying 1:1 trying to fix some issues like some mismatched hues.

    Oh, the negative margin in the italic with the left:50% -- that's just an easier way to center that than trying to screw around with the math to have the proper negative left position.

    That what you were aiming for more or less?
     
    Last edited: Jun 1, 2015
    deathshadow, Jun 1, 2015 IP
    Rares Mihail Prala likes this.
  6. Lassar

    Lassar Member

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #6
    More or less.

    How did you do the curve ?
     
    Lassar, Jun 3, 2015 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    That's what the empty <i> tag is in there for -- it's absolute positioned underneath the <a>, with the <a> set to overflow:hidden; the <span> is then relative positioned over the absolute positioned <i>.

    If you want to see what's "really" going on there, remove the overflow:hidden from the anchor, you'll see that all I did was make a giant circle by using a border-radius equal to half the width of the <i>. The overflow just chops off the parts of the circle we don't want to show... Which means poof, desired appearance with no images needed.

    It's getting really cool how we can now do a lot of things without images or scripting thanks to CSS3.

    In theory you could probably lose the <i> tag for generated content, but targeting generated content for hover states is a train wreck IMHO you're better off avoiding for now. I used an <i> without a class since empty it really doesn't matter what tag we use so long as it's structurally valid, and since we're not using it elsewhere in there we don't need any extra classes and can grab it off the parent.

    The same markup could be used to do it with images and CSS sprites, but you'd have to fix the size of the element in pixels instead of the dynamic font and sizes it has now. (which will auto-enlarge with the user or OS default size). That's why I made so much of it in EM's mated to % font-size.
     
    deathshadow, Jun 3, 2015 IP
  8. Lassar

    Lassar Member

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #8
    I got it to work in almost all browsers except ie9.

    The gradient filter is not working in internet explorer 9.

    What's the matter with the ie9 gradient filter in this button?

    

<!DOCTYPE html>
<html>
<head>
<style>
.belcher-button {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
display:block;
position: relative;
width:313px;
height:48px;
text-align:center;
text-decoration:none;
font-size:30px;
font-weight:bold;
color:#000;
border-top:3px solid #FFFF99;
border-right:3px solid #FF951C;
border-bottom:3px solid #FF951C;
border-left:3px solid #FFFF99;
background:#FFAC0A;
outline: #FC0006 solid 4px;
margin: 0 auto;
}

.belcher-button:before {
content:"";
position:absolute;
display:inline-block;
width:313px;
height:39px;
left:0;
right:0;
margin: 0 auto;
bottom:1px;
border-radius:210%/100px 100px 0 0;
background:#FFB014;
background: -webkit-linear-gradient(#FFF09B, #FCE237);
background: -webkit-linear-gradient(top,#FFF09B, #FCE237);
background: -o-linear-gradient(#FFF09B, #FCE237);
background: -moz-linear-gradient(#FFF09B, #FCE237);
background: linear-gradient(#FFF09B, #FCE237);

/* ie 6-8 and ie9 filters */

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FFF09B, endColorstr=#FCE237);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF09B, endColorstr=FCE237)";
}

.belcher-button:after {
content:"Buy Now";
position:absolute;
left:0;
right:0;
line-height:50px;
text-shadow:1px 1px 2px #FFF9E5;
z-index:100;
}

.belcher-button:hover {
outline: #009900 solid 4px;
}

.belcher-button:hover:before {

background: -webkit-linear-gradient(#FFF8DA, #FFFB00);
background: -webkit-linear-gradient(top,#FFF8DA, #FFFB00);
background: -o-linear-gradient(#FFF8DA, #FFFB00);
background: -moz-linear-gradient(#FFF8DA, #FFFB00);
background: linear-gradient(#FFF8DA, #FFFB00);

/* ie 6-8 and ie9 filters */

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFF8DA', endColorstr='#FFFB00');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF8DA, endColorstr=#FFFB00)";
}


</style>
</head>
<body>
Hello Randall
<a class="belcher-button" href="#" ></a>

</body>
</html>
    Code (markup):
     
    Lassar, Jun 3, 2015 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Say hello to another reason I don't use linear-gradient if I can avoid it. (on top of the MASSIVE waste of memory it can be, slow render, and massive ridiculous number of vendor prefixes)

    The DirectX filter actually does NOT run in IE9, and it breaks the linear-gradient.

    Oh, and your border-radius declaration is gibberish... not sure what you think that 210% is going to accomplish.

    Again for something so small I'd just use a inset box-shadow, and say "oh well" to IE8/earlier... and :hover:before is just BEGGING for it NOT to work in IE9 and some flavors of FF, hence why I didn't use generated content. Similar to how I would NOT be declaring widths and heights in pixels and a host of other accessibility failings that code has. (like the lack of text content)
     
    deathshadow, Jun 3, 2015 IP
  10. Lassar

    Lassar Member

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #10
    I finally found out the reason for it not working in ie9.

    ie9 has a bug when gradient is used with border radius.

    You have to use background-image svg to create a gradient.
     
    Lassar, Jun 3, 2015 IP