Forums
View unanswered posts | View active topics It is currently Tue Oct 21, 2014 9:11 pm



Reply to topic  [ 3 posts ] 
 Gradient Background for form button type 
Author Message

Joined: Thu Jul 15, 2010 11:09 am
Posts: 5
Post Gradient Background for form button type
Hi,

Is it possible to apply Gradient Background to a button element?

also is it possible to get a different gradient on hover? I basically don't want to use a background image.

Code:
.btn_holder button{
   behavior: url(/dir_path/PIE.htc);
}

.btn_holder{
   padding:2px;
   background:#cf1f29;
}

.btn_holder button{
   display:block;
   text-align:center;
   border:1px solid #fbc8b3;
   padding:5px 10px;
   text-transform:uppercase;
   color:#fff;
   background: -moz-linear-gradient(top, #d0171e 0, #8f0406 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#d0171e), color-stop(100%,#8f0406));
   -pie-background: linear-gradient(#d0171e, #8f0406);
}

.btn_holder button:hover{
   background: -moz-linear-gradient(top, #f81922 0, #c3050b 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#f81922), color-stop(100%,#c3050b));
   -pie-background: linear-gradient(#f81922, #c3050b);
   cursor:pointer;
}


This has an issue with ALL IE versions (I have not checked IE9 Beta).

Thanks in advance


Tue Nov 23, 2010 5:54 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Gradient Background for form button type
Yes this should work, to both questions.

I notice you don't have position:relative on either the button elements or on their container. You'll likely run into the z-index issue (see the Known Issues documentation page) if that's the case. See if that helps.


Tue Nov 23, 2010 7:27 pm
Profile

Joined: Thu Jul 15, 2010 11:09 am
Posts: 5
Post Re: Gradient Background for form button type
Thank you very much, giving
Code:
position: relative;


works exactly I needed.

The hover doesn't work only on IE6 but, IE7 & 8 works fine (more than enough for now :) )..

Thanks again.


Mon Nov 29, 2010 3:44 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Google [Bot], Yahoo [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.