Resource icon

Breathing Sign Up Button

Overview Updates (1) Reviews (13) Discussion
This looks great, i can't wait to try it.Is there any way to achieve the same effect with the post new thread button. It might encourage users to create more content
 
Lone Wolf said:
This looks great, i can't wait to try it.Is there any way to achieve the same effect with the post new thread button. It might encourage users to create more content
Click to expand...
I haven't tried with the New Thread button, to be honest. May take a look later.
 
replacing this:
Code: 
#SignupButton:hover .inner {
  background: #e33100 !important;
}
with this:
Code: 
#SignupButton:hover .inner{
  background: #c40000!important;
  text-decoration: none;
  -webkit-animation: none;
  animation: none;
}
in the hover action, the animation will be stoped, I think looks more nice xdd
EL7uaOF.gif


Complete:

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 { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
        }
@-moz-keyframes redPulse {
from { background-color: #bc330d; -moz-box-shadow: 0 0 9px #333; }
          50% { background-color: #e33100; -moz-box-shadow: 0 0 18px #e33100; }
          to { background-color: #bc330d; -moz-box-shadow: 0 0 9px #333; }
        }
@-o-keyframes redPulse {
from { background-color: #bc330d; -o-box-shadow: 0 0 9px #333; }
          50% { background-color: #e33100; -o-box-shadow: 0 0 18px #e33100; }
          to { background-color: #bc330d; -o-box-shadow: 0 0 9px #333; }
        }
@keyframes redPulse {
from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
          50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
          to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
        }
#SignupButton {
border: none !important;
background: transparent !important;
}
#SignupButton .inner {
-webkit-animation-name: redPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: redPulse;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-o-animation-name: redPulse;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
animation-name: redPulse;
animation-duration: 2s;
animation-iteration-count: infinite;
background: none repeat scroll 0% 0% #750606 !important;
}
#SignupButton:hover .inner{
 
  background: #c40000!important;
  text-decoration: none;
  -webkit-animation: none;
  animation: none;
}
/* END SIGN UP BUTTON*/
 
Last edited:
Lone Wolf said:
That looks great. I prefer the brighter red in this version.
Click to expand...
Will be ready in 5 minutes, please wait :D
... done!

l943Zo4.gif

Code: 
/* POST NEW THREAD BUTTON*/
a.callToAction {
border: 1px solid #c40000;
}
a.callToAction span{
-webkit-animation-name: redPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: redPulse;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-o-animation-name: redPulse;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
animation-name: redPulse;
animation-duration: 2s;
animation-iteration-count: infinite;
background: none repeat scroll 0% 0% #750606 !important;
}

a.callToAction:hover span{
background: #c40000!important;
text-decoration: none;
-webkit-animation: none;
animation: none;
}
/* END POST NEW THREAD BUTTON*/

(y)
 
Last edited:
giorgino said:
Hey great :)
One question. How do you made the animation?
View attachment 93278
Click to expand...
kvnpjVh.gif

open source: https://github.com/lepht/licecap

LICEcap
simple animated screen captures

licecap_rules.gif


licecap demo animation

LICEcap can capture an area of your desktop and save it directly to .GIF (for viewing in web browsers, etc) or .LCF (see below).

LICEcap is an intuitive but flexible application (for Windows and now OSX), that is designed to be lightweight and function with high performance.

LICEcap is easy to use: view a demo (output is here).

In addition to .GIF, LICEcap supports its own native lossless .LCF file format, which allows for higher compression ratios than .GIF, higher quality (more than 256 colors per frame), and more accurate timestamping. If you record to .LCF, you can play back the .LCF files within REAPER (and/or use it to convert to .gif or another video format).

License

LICEcap is GPL free software, each download package includes the source.

Features and Options

Record directly to .GIF or .LCF.
Move the screen capture frame while recording.
Pause and restart recording, with optional inserted text messages.
Global hotkey (shift+space) to toggle pausing while recording
Adjustable maximum recording framerate, to allow throttling CPU usage.
Basic title frame, with or without text.
Record mouse button presses.
Display elapsed time in the recording.
Requirements

For Windows: Windows XP/Vista/7 (might work with reduced functionality on other versions)
For OSX: OS 10.4+ (10.6+ for full feature support), PPC or Intel (note: OS X support is still preliminary, some features are not supported)
A reasonably fast CPU
A healthy amount of RAM (1GB+, especially when encoding to LCF)
Author and Original Source

This project was created by Cockos Interactive, and is available on the web at the official homepage.

The original source code repository is available via git from the cockos licecap git repository
 
rafass said:
Will be ready in 5 minutes, please wait :D
... done!

l943Zo4.gif

Code: 
/* POST NEW THREAD BUTTON*/
a.callToAction {
border: 1px solid #c40000;
}
a.callToAction span{
-webkit-animation-name: redPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: redPulse;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-o-animation-name: redPulse;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
animation-name: redPulse;
animation-duration: 2s;
animation-iteration-count: infinite;
background: none repeat scroll 0% 0% #750606 !important;
}

a.callToAction:hover span{
background: #c40000!important;
text-decoration: none;
-webkit-animation: none;
animation: none;
}
/* END POST NEW THREAD BUTTON*/

(y)
Click to expand...

That works great. How can I get the same effect (bright red to dark red) with the login button
 
@rafass I was wondering if it is possible to add the same effect to a bbcode spoiler button. How cool would that be. A flashing/breathing spoiler button to add attention to it.
 
rafass said:
I'll try :D
Click to expand...

While you're being all creative. I was wondering if you could find a way to make the new posts Node icon on the forum homepage breathe as well. It's probably not possible but how cool would that be!!

So forums with no content have a grayed out static icon and the ones with new content have a breathing icon. Is that even possible?
 
Dear @Lone Wolf
I forgot it. sorry. I've been quite busy today.
I'll give you that piece of css tomorrow.
Also I'll take a look to open a new thread to share this kind of things. (y)
 
rafass said:
Dear @Lone Wolf
I forgot it. sorry. I've been quite busy today.
I'll give you that piece of css tomorrow.
Also I'll take a look to open a new thread to share this kind of things. (y)
Click to expand...

No my friend there's no rush. Take your time. Although a new resource for these things could be better.
 
(You have insufficient privileges to post here.)
I can't open new threads yet, if someone want to open it, I'm willing to help.
 
You must log in or register to reply here.

Similar threads

SoarinBolt
  • Question Question
XF 1.5 Change "Login or Sign Up" button at top to a link
Replies
2
Views
1K
SoarinBolt
SoarinBolt
abdfahim
  • Question Question
XF 1.5 Add Sign Up button in a notice
Replies
12
Views
902
OUTL4W
OUTL4W
Xer0n_
  • Question Question
XF 1.5 Remove Sign Up Button
Replies
3
Views
1K
Paul B
P
bibitbunga
  • Question Question
Login via Social Media Right Under "Sign Up" Button?
Replies
5
Views
1K
asmithedtech
asmithedtech
Reeses
  • Question Question
XF 1.5 Linking the "Sign Up" button elsewhere
Replies
1
Views
566
Paul B
P
Back
Top Bottom