• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Breathing Sign Up Button

Lisa

Well-known member
#1
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).

Code:
/* 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

Well-known member
#2
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

Well-known member
#3
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

Active member
#6
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.
 

Mrs.T

Active member
#11
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!
 

Adam Howard

Well-known member
#13
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)
 

Attachments

Lisa

Well-known member
#14
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

Well-known member
#15
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?