Breathing Sign Up Button

[ArnyVee]

Nice little touch

 

[Kevin]

So what other experiments have you been playing with?

I put in place over at A Walker Bit Me but changed it to a 1 second interval so it stands out more.

 

[AndreaMarucci]

Like it very much. If I use it in my site that has the default XF style the button will be red or orange like in the XF style? If not, how can I change the colors?

 

[Lisa]

Like it very much. If I use it in my site that has the default XF style the button will be red or orange like in the XF style? If not, how can I change the colors?

You need to change the # values to suit your own colour scheme.

For an orange variation, try:-

@-webkit-keyframes orangePulse {
from { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; -webkit-box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
}
@-moz-keyframes orangePulse {
from { background-color: #fc9200; -moz-box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; -moz-box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; -moz-box-shadow: 0 0 9px #333; }
}

@-o-keyframes orangePulse {
from { background-color: #fc9200; -o-box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; -o-box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; -o-box-shadow: 0 0 9px #333; }
}
@keyframes orangePulse {
from { background-color: #fc9200; box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; box-shadow: 0 0 9px #333; }
}

#SignupButton {
border: none !important;
background: transparent !important;
}

#SignupButton .inner {
-webkit-animation-name: orangePulse;
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: infinite;

-moz-animation-name: orangePulse;
-moz-animation-duration: 2s; 
-moz-animation-iteration-count: infinite;

-o-animation-name: orangePulse;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;

animation-name: orangePulse;
animation-duration: 2s;
animation-iteration-count: infinite;
}
/* END SIGN UP BUTTON*/

 

[Slavik]

Hah, thats awesome

 

[Janmaat]

How cool is that?!

Well done! @Azhria Lilu

 

[Lisa]

Hah, thats awesome

How cool is that?!

Well done! @Azhria Lilu

Thanks Glad you like it!

 

[giorgino]

You need to change the # values to suit your own colour scheme.

For an orange variation, try:-

@-webkit-keyframes orangePulse {
from { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; -webkit-box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
}
@-moz-keyframes orangePulse {
from { background-color: #fc9200; -moz-box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; -moz-box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; -moz-box-shadow: 0 0 9px #333; }
}

@-o-keyframes orangePulse {
from { background-color: #fc9200; -o-box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; -o-box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; -o-box-shadow: 0 0 9px #333; }
}
@keyframes orangePulse {
from { background-color: #fc9200; box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; box-shadow: 0 0 9px #333; }
}

#SignupButton {
border: none !important;
background: transparent !important;
}

#SignupButton .inner {
-webkit-animation-name: orangePulse;
-webkit-animation-duration: 2s; }
-webkit-animation-iteration-count: infinite;

-moz-animation-name: orangePulse;
-moz-animation-duration: 2s; }
-moz-animation-iteration-count: infinite;

-o-animation-name: orangePulse;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;

animation-name: orangePulse;
animation-duration: 2s;
animation-iteration-count: infinite;

/* END SIGN UP BUTTON*/

Great trick Azhria, but in my environment the button "breathe" one time only...

 

[Lisa]

Great trick Azhria, but in my environment the button "breathe" one time only...

You don't appear to have added:-
-webkit-animation-iteration-count: infinite;
to
#SignupButton .inner {

 

[giorgino]

You don't appear to have added:-
-webkit-animation-iteration-count: infinite;
to
#SignupButton .inner {

uhmm... this is the exact code I using

$1

/* SIGN UP BOX */
@-webkit-keyframes orangePulse {
from { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
        50% { background-color: #ffb515; -webkit-box-shadow: 0 0 18px #ffb515; }
        to { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
    }
@-moz-keyframes orangePulse {
from { background-color: #fc9200; -moz-box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; -moz-box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; -moz-box-shadow: 0 0 9px #333; }
}
@-o-keyframes orangePulse {
from { background-color: #fc9200; -o-box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; -o-box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; -o-box-shadow: 0 0 9px #333; }
}
@keyframes orangePulse {
from { background-color: #fc9200; box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; box-shadow: 0 0 9px #333; }
}
#SignupButton {
border: none !important;
background: transparent !important;
}
#SignupButton .inner {
-webkit-animation-name: orangePulse;
-webkit-animation-duration: 2s; }
-webkit-animation-iteration-count: infinite;
-moz-animation-name: orangePulse;
-moz-animation-duration: 2s; }
-moz-animation-iteration-count: infinite;
-o-animation-name: orangePulse;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
animation-name: orangePulse;
animation-duration: 2s;
animation-iteration-count: infinite;
/* END SIGN UP BUTTON*/

 

[Lisa]

uhmm... this is the exact code I using

#SignupButton .inner {
-webkit-animation-name: orangePulse;
-webkit-animation-duration: 2s; }
-webkit-animation-iteration-count: infinite;
-moz-animation-name: orangePulse;
-moz-animation-duration: 2s; }
-moz-animation-iteration-count: infinite;
-o-animation-name: orangePulse;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
animation-name: orangePulse;
animation-duration: 2s;
animation-iteration-count: infinite;
/* END SIGN UP BUTTON*/

This bit is wrong.. you need it to be:-

#SignupButton .inner {
-webkit-animation-name: orangePulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: orangePulse;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-o-animation-name: orangePulse;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
animation-name: orangePulse;
animation-duration: 2s;
animation-iteration-count: infinite;
}
/* END SIGN UP BUTTON*/

 

[Sheldon]

-webkit-animation-duration: 2s; }
-webkit-animation-iteration-count: infinite;
-moz-animation-name: orangePulse;
-moz-animation-duration: 2s; }

Remove those "}"

 

[giorgino]

@Azhria Lilu @Sheldon Thank you work great!

 

[Janmaat]

I need to try this asap in my test environment

 

[snow2000]

Very nice! My Button ist breathing now! I like it! Thanks

 

[Adam Howard]

Works in XenForo 1.2 without issue

 

[Lisa]

Works in XenForo 1.2 without issue

Its only CSS so I'd have been surprised if it didn't

 

[Adam Howard]

Its only CSS so I'd have been surprised if it didn't

There are a few css edits I had that no longer function correctly. So the idea that css is 100% full proof all the time, isn't exactly true. It does depend on the surrounding css.

 

[Lisa]

There are a few css edits I had that no longer function correctly. So the idea that css is 100% full proof all the time, isn't exactly true. It does depend on the surrounding css.

Only if the class had changed... the class hasn't changed for this, so my statement stands

 

[Matthew Hawley]

Looks really good. Nice little tweak.