Breathing Sign Up Button - Nút đăng ký nhấp nháy

Breathing Sign Up Button - Nút đăng ký nhấp nháy

Để đạt được điều này là khá dễ dàng, đi đến EXTRA.CSS của bạn và thêm những điều sau đây:

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

Demo: http://hoccodevn.com/


Chúc các bạn thành công.

Nguồn: VNXF.VN​