Turn login text into a rollover button

Ready
This style rule is based on the code generated by cssbuttongenerator.com. Just update the generated style rule to target "#Welcome_LoginLink" as shown below.

/* ------ LOG IN BUTTON ------ */
#Welcome_LoginLink{
-moz-box-shadow:inset 0px 1px 0px 0px #00539c;
-webkit-box-shadow:inset 0px 1px 0px 0px #00539c;
box-shadow:inset 0px 1px 0px 0px #00539c;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #488cc7), color-stop(1, #00539c) );
background:-moz-linear-gradient( center top, #488cc7 5%, #00539c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#488cc7', endColorstr='#00539c');
background-color:#488cc7;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #adadad;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #4d4d4d;
}#Welcome_LoginLink:hover{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00539c), color-stop(1, #488cc7) );
background:-moz-linear-gradient( center top, #00539c 5%, #488cc7 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00539c', endColorstr='#488cc7');
background-color:#00539c;
}#Welcome_LoginLink:active{
position:relative;
top:1px;
}

#CSS
Created By: Justin Prevatte Apr 15, 2013
Last Updated By: Justin Prevatte Apr 15, 2013
4 comments
0 Views
0 revisions
 

Related Links

No Related Resource entered.

Comments

Anne-Margaret Olsson (she/her/hers)
May 01, 2013 10:43 AM

I have been waiting for a way to increase the size of the Login text!!! This is GREAT! Thanks!!

Danielle Boutin
Apr 18, 2013 09:26 AM

Perfect! Thank you so much!

Justin Prevatte
Apr 18, 2013 08:52 AM

@Danielle
I'm glad it worked and you like it. Try adding this rule and adjust the px to your liking.
#Welcome_LoginLink{
position:relative;
top: -15px;
}

Danielle Boutin
Apr 17, 2013 04:22 PM

Thank you! My button looks great however its lying right on the top navigation. How do I add some space between the two? The link to our site is www.sosrapb.com
Thanks