Tutorial Breathing Sign Up Button

Hello iHaxGlobal​

Today I will share with you the Breathing Sign Up Button​

To achieve this is pretty straightforward, go to your EXTRA.CSS and add the following:​

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: #e33100 !important;
}
/* END SIGN UP BUTTON*/ 

... and save it.

Cheers.

 

Please talk in french ...