Skip to main content (Press Enter).
Sign in
Skip auxiliary navigation (Press Enter).
Join
Education
Knowledge Base
Support
Skip main navigation (Press Enter).
Toggle navigation
Search Options
Home
Communities
My Communities
Online Community Product Communities
Marketing Automation Communities
Recommended Communities
Education
Academy
Live Training
On-Demand Training
Webinar Recordings
Knowledge Base
Events
Upcoming Events
HUG Connect
Support
Knowledge Base
Create a Case
Resources
Blogs
Expert Advice
Customer Examples
Success Centers
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
3
Like
Related Links
No Related Resource entered.
Comments
Anne-Margaret Olsson
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
Higher Logic | 1919 Lynn Street, 5th Floor, Arlington, VA 22209 | hug@higherlogic.com | (202) 360-4402
Powered by Higher Logic