custom button in Notice / need CSS help

erich37 · Apr 23, 2013

I have put a "Sign Up Now" image-button into a "Notice".

The button is an image (.png) only which links to "domain.com/register".
This button image is different than the "button-image" I do have in the sidebar which triggers the Login-dropdown. But I would like to have the same CSS-effect as my Login-button in the sidebar.

How would the CSS look like for this Signup-button ? I am doing something wrong with the CSS as the URL-Link at the "Sign-up Button" is underlined and it only links to the URL (domain.com/register) when I directly hover over the text at the button. But I would like to have it link to the URL when I am hovering over the button.

It seems my CSS skills are fairly limited

Appreciate your help!

Jeremy · Apr 23, 2013

Posting CSS will help get you support.

erich37 · Apr 23, 2013

this code I do have put directly into the "Notice" itself:

Code:

<center>
<div class="noticeButtonContainer">
<div id="SignupButterfly"><a href="/register" class="schmetterling"><b>Sign Up Free Now!</b></a></div>
</div></center>

this is the code I do have put into template extra.css

Code:

.noticeButtonContainer
{
width: 370px;
padding-top: 10px;
}
 
 
#SignupButterfly
{
background: url("@imagePath/xenforo/signup_button.png") no-repeat scroll center bottom transparent;
border-radius: none;
width: 358px;
height: 73px;
border: none;
margin: 0 auto;
text-align: center;
display: block;
cursor: pointer;
line-height: 60px;
}
 
.schmetterling {
color: #FFFFFF !important;
font-size: 16pt;
font-family: @button.font-family;
text-shadow: 0px 0px 3px rgba(0,0,0, 0.5);
text-decoration: none;
}
 
 
#SignupButterfly:hover .schmetterling {
opacity: 0.5;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
 
 
#SignupButton
{
background: url("@imagePath/xenforo/login_button.png") no-repeat scroll center bottom transparent;
border-radius: none;
width: 210px;
height: 73px;
border: none;
margin: 0 auto;
}

The image named "login_button.png" is the one which I do have located at the "Sidebar" which triggers the Login-Dropdown. This is working fine.

The image named "signup_button.png" is the one which I do have located at the "Notice" which directs towards "domain.com/register". Here I am having issues.

EQnoble · Apr 23, 2013

Try this....

Code:

<center>
        <div class="noticeButtonContainer">
              <a href="/register" class="schmetterling">
                    <span id="SignupButterfly"><b>Sign Up Free Now!</b></span>
                </a>   
        </div>
</center>

Code:

.noticeButtonContainer
{
width: 370px;
padding-top: 10px;
}
 
 
#SignupButterfly
{
background: url("@imagePath/xenforo/signup_button.png") no-repeat scroll center bottom transparent;
border-radius: none;
width: 358px;
height: 73px;
border: none;
margin: 0 auto;
text-align: center;
display: block;
cursor: pointer;
line-height: 60px;
}
 
.schmetterling {
color: #FFFFFF !important;
font-size: 16pt;
font-family: @button.font-family;
text-shadow: 0px 0px 3px rgba(0,0,0, 0.5);
text-decoration: none;
}
 
 
.schmetterling #SignupButterfly:hover  {
opacity: 0.5;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
 
 
#SignupButton
{
background: url("@imagePath/xenforo/login_button.png") no-repeat scroll center bottom transparent;
border-radius: none;
width: 210px;
height: 73px;
border: none;
margin: 0 auto;
}

erich37 · Apr 23, 2013

many thanks EQ !

it works fine now regarding linking to the Register-URL now when hoving over the button.

However, when hoovering over the button, the full button has the "opacity" instead of just the button-text.
And the text of the Button (the text "Sign Up Free Now!") is underlined when hovering over the button. I do not want to have that text "underlined"

I added "text-decoration: none" to the hover-CSS, but it still does not work

Code:

.schmetterling #SignupButterfly:hover  {
opacity: 0.5;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
}

Well, I guess I will work that out somehow during long nightly hours

EQnoble · Apr 23, 2013

start a convo and send me a link...

EQnoble · Apr 23, 2013

please mind that I am using your code exactly and you images are not available to me so I just see text on a background...

try this...

Code:

.noticeButtonContainer
{
width: 370px;
padding-top: 10px;
}
 
 
#SignupButterfly
{
background: url("@imagePath/xenforo/signup_button.png") no-repeat scroll center bottom transparent;
border-radius: none;
width: 358px;
height: 73px;
border: none;
margin: 0 auto;
text-align: center;
display: block;
cursor: pointer;
line-height: 60px;
}
 
.schmetterling {
color: #FFFFFF !important;
font-size: 16pt;
font-family: @button.font-family;
text-shadow: 0px 0px 3px rgba(0,0,0, 0.5);
text-decoration: none;
}
 
.schmetterling #SignupButterfly:hover  {
 
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
 
.schmetterling #SignupButterfly:hover b {
  opacity: 0.5;
}
 
#SignupButton
{
background: url("@imagePath/xenforo/login_button.png") no-repeat scroll center bottom transparent;
border-radius: none;
width: 210px;
height: 73px;
border: none;
margin: 0 auto;
}

Code:

<center>
        <div class="noticeButtonContainer">
               <a href="/register" class="schmetterling">
                   <span id="SignupButterfly"><b>Sign Up Free Now!</b></span>
                </a>
        </div>
</center>

erich37 · Apr 23, 2013

EQnoble said:
start a convo and send me a link...

many thanks for offering help on my issue

Very much appreciated!

EQnoble · Apr 23, 2013

This should mimic it exactly

Code:

.noticeButtonContainer
{
width: 370px;
padding-top: 10px;
}
 
 
#SignupButterfly
{
background: url("@imagePath/xenforo/signup_button.png") no-repeat scroll center bottom #c0c0c0;
border-radius: none;
width: 358px;
height: 73px;
border: none;
margin: 0 auto;
text-align: center;
display: block;
cursor: pointer;
line-height: 60px;
}
 
.schmetterling {
color: #FFFFFF !important;
font-size: 16pt;
font-family: @button.font-family;
text-shadow: 0px 0px 3px rgba(0,0,0, 0.5);
text-decoration: none;
}
 
.schmetterling #SignupButterfly:hover  {
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
 
.schmetterling #SignupButterfly:hover b {
  opacity: 0.5;
  transition:all 0.3s ease-in-out 0s;
}
 
a[href]:hover.schmetterling:hover {
  text-decoration:none;
}
 
#SignupButton
{
background: url("@imagePath/xenforo/login_button.png") no-repeat scroll center bottom #c0c0c0;
border-radius: none;
width: 210px;
height: 73px;
border: none;
margin: 0 auto;
}

Code:

<center>
    <div class="noticeButtonContainer">
        <a href="/register" class="schmetterling">
                <span id="SignupButterfly"><b>Sign Up Free Now!</b></span>
        </a>
    </div>
</center>

erich37 · Apr 23, 2013

EQnoble said:
This should mimic it exactly

many thanks, that works just perfect

Where or how would I have to put the CSS for the "button active", so that it gives the click-effect when clicking the button.
The same code as we already have at the default XF "Sign Up Button" for "Active State":

Code:

position: relative;
top: 2px;

BTW: I have checked this "click-effect" in IE-browser and it is not working there.
Is there any trick to get this also working in IE-browser? Seems it is not possible since XF did not adapt this "click-effect" for IE-browser.....

EQnoble · Apr 23, 2013

Code:

.schmetterling:active {
    position: relative;
    top: 2px;
}

my first inclination if I really want to do something that ie doesn't support behaviorally speaking is to try to imitate or emulate the final results with js <insert bashing from programmers here>

erich37 · Apr 23, 2013

thanks a lot EQnoble ! You saved me a lot of nightly hours in figuring out this CSS-code

regarding IE-browser.... I was just surprised that this click-effect is not working in IE

EQnoble · Apr 23, 2013

I believe it has to do with active being applied to an li and how different browsers handle li and the active selector...and truthfully there is big differences on how all browsers handle this...literally ff chrome ie and opera all have different behaviors regarding this.

here is an example that kind of illustrates the behavior with the whole li active thing as well

http://jsfiddle.net/BChAz/

erich37 · Apr 23, 2013

o.k. ...... so how do we get Mike-Like to fix this ?

custom button in Notice / need CSS help

erich37

Well-known member

Jeremy

in memoriam 1991-2020

erich37

Well-known member

EQnoble

Well-known member

erich37

Well-known member

EQnoble

Well-known member

EQnoble

Well-known member

erich37

Well-known member

EQnoble

Well-known member

erich37

Well-known member

EQnoble

Well-known member

erich37

Well-known member

EQnoble

Well-known member

erich37

Well-known member

Similar threads

We value your privacy