custom button in Notice / need CSS help

erich37

Well-known member
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 :confused:


Appreciate your help!

:)
 
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. :confused:

:cool:
 
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;
}
 
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 :confused:
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 :(
 
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>
 
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>
 
This should mimic it exactly

many thanks, that works just perfect (y)

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.....

:coffee:
 
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>
 
thanks a lot EQnoble ! You saved me a lot of nightly hours in figuring out this CSS-code :) :love: (y)

regarding IE-browser.... I was just surprised that this click-effect is not working in IE :cautious:
 
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/
 
Back
Top Bottom