• You need 5 posts to download resources. You can only download 2 resources per day. To remove these limits consider upgrading.

XF Blinking Log In / Register Buttons

You Suck

Owner of: https://webflake.org
Administrator
Uploader
LV
0
 
Joined
Feb 20, 2023
Messages
222
Reaction score
181
Awards
13
Create a very simple, yet effective, call to action button that will flash your "Log In" button to smaller viewports, which hide the "Register" link, and then swap it with the "Register" button in larger viewports when it becomes visible.

Add the following code to your extra.less template:

CSS:
@media screen and (max-width: 373px) {
    .p-navgroup-link.p-navgroup-link--logIn {
      -webkit-animation: blinkReg 1s infinite;  /* Safari 4+ */
      -moz-animation: blinkReg 1s infinite;  /* Fx 5+ */
      -o-animation: blinkReg 1s infinite;  /* Opera 12+ */
      animation: blinkReg 1s infinite;  /* IE 10+, Fx 29+ */
    }
}
@media screen and (min-width: 374px) {
    .p-navgroup-link.p-navgroup-link--register {
      -webkit-animation: blinkReg 1s infinite;  /* Safari 4+ */
      -moz-animation: blinkReg 1s infinite;  /* Fx 5+ */
      -o-animation: blinkReg 1s infinite;  /* Opera 12+ */
      animation: blinkReg 1s infinite;  /* IE 10+, Fx 29+ */
    }
}
@-webkit-keyframes blinkReg {
    to {
        background-color: fade(@xf-paletteNeutral3, 15%);
    }
}

View attachment reg.mp4



Results
 
Last edited:

Nick

Developer
Banned User
LV
0
 
Joined
Feb 7, 2023
Messages
491
Reaction score
128
Awards
14
nice tutorial this is awesome, Some members will def see this interesting.
 
Top