Breathing Sign Up Button

[Lisa]

Azhria Lilu submitted a new resource:

Breathing Sign Up Button - Give your Sign Up Button a pulse!

For a demo of what's going on, please look at the sign up button at http://bansheetalk.com

To achieve this is pretty straightforward, go to your EXTRA.CSS and add the following (this one will give you the same Red one as on the demo).

/* SIGN UP BOX */
@-webkit-keyframes redPulse {
from { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
          50% { background-color: #e33100; -webkit-box-shadow: 0 0 18px #e33100; }
          to {...

Read more about this resource...

 

[James]

At first it reminded me of the blink element back in the day. Gross.

I like it, perhaps consider altering the width and height of it a couple of pixels as the colour changes? It may give a more "breathing" feel... but may also be more annoying. Who knows!

 

[Lisa]

At first it reminded me of the blink element back in the day. Gross.

I like it, perhaps consider altering the width and height of it a couple of pixels as the colour changes? It may give a more "breathing" feel... but may also be more annoying. Who knows!

It's a bit smoother than the blink... I was just playing with css animations and it amused me so figured I'd share.. someone might like it.

 

[Mrs.T]

I love it. Thanks for sharing.

 

[Lisa]

I love it. Thanks for sharing.

You're welcome.... I'll keep experimenting LOL

 

[Mrs.T]

Is it possible to get it a little bit redder. My site is very dark and it looks more orange then red and not sure which color I have to change to get the button red.

 

[Lisa]

You need to change all the colours.. it works as a gradient animation.

 

[Mrs.T]

Hmmm... ok I like it the way it is too

 

[Lisa]

Try changing the #bc330d to #CA1E30

 

[James]

Perhaps you can have one that spins 36o degrees and grows in height when you load the page...

 

[Mrs.T]

Actually I just looked and I have some elements in my forum that are a pretty close color match to it so it will work perfectly!

 

[Lisa]

Perhaps you can have one that spins 36o degrees and grows in height when you load the page...

I prefer the more subtle pulse effect myself.

 

[Adam Howard]

There maybe a conflict with this with @Chris Deeming 's notifications add-on. I notice that when applying this, his notice no longer shows up on the index and I have bit of conflict with jquery

As a matter of interest @Azhria Lizu this bugs shows up on your site as well. Check it in Firefox (via firebug)

 

[Lisa]

There maybe a conflict with this with @Chris Deeming 's notifications add-on. I notice that when applying this, his notice no longer shows up on the index and I have bit of conflict with jquery

As a matter of interest @Azhria Lizu this bugs shows up on your site as well. Check it in Firefox (via firebug)

That site doesn't have Chris's notifications addon installed. I also don't get any jquery errors show up.

 

[James]

There maybe a conflict with this with @Chris Deeming 's notifications add-on. I notice that when applying this, his notice no longer shows up on the index and I have bit of conflict with jquery

As a matter of interest @Azhria Lizu this bugs shows up on your site as well. Check it in Firefox (via firebug)

That's interesting. What site?

 

[Adam Howard]

That site doesn't have Chris's notifications addon installed. I also don't get any jquery errors show up.

http://bansheetalk.com/

Show up right here (see screen shot)

 

[Lisa]

There was a ; missing, but still.. don't have Chris's notifications installed

 

[Adam Howard]

That's interesting. What site?

On my site http://www.sociallyuncensored.eu/forums

 

[James]

On my site http://www.sociallyuncensored.eu/forums

Just visited in Chrome and Chris' notification showed up in the bottom right corner.
The only JS error I see is:

Uncaught TypeError: Cannot read property 'nodeName' of undefined

 

[Lisa]

Azhria Lilu updated Breathing Sign Up Button with a new update entry:

Typo fixed

There was a small typo (a ; missing). Simply copy and paste the code again into EXTRA.css.

Read the rest of this update entry...