Unmaintained - Animated Arrow Button

Compatible XF 1.x versions

1.0
1.1
1.2
1.3
1.4

Visible branding: No

Makes that button arrow thingy animated! (The preview above is slow to emphasis the animation, the below version is faster)

You can modify this for multiple uses and I will describe all the uses below!

First, this requires ZERO template edits. Yeah, I'm not a fan of em so we will be using only a CSS snippit that you can drop into the EXTRA.css template to get the job done. Nifty, eh?

WITH DEFAULT IMAGE:
To use this with the default arrow, you know:

Yeah that one!

Add the following to your EXTRA.css template or any CSS template for that matter. Don't ask me :|

HTML:

.Popup .arrowWidget
{
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    -ms-transform-origin: all 0.1s ease-in;
    transition: all 0.1s ease-in;

   -webkit-transform-origin: 50% 47%;
   -moz-transform-origin: 50% 47%;
   -o-transform-origin: 50% 47%;
   -ms-transform-origin: 50% 47%;
   transform-origin: 50% 47%;
}

.PopupOpen .arrowWidget
{
    background-position: -32px 0 !important;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

Which should result in this:

WITH FONT AWESOME:
Ok first, add this to the head of your document (hint, PAGE_CONTAINER)

HTML:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Then add this to EXTRA.css:

HTML:

.Popup .arrowWidget
{
    width: auto !important;
    height: auto !important;

    background: none !important;

    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    -ms-transform-origin: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}
.Popup .arrowWidget:after
{
    font-family: "FontAwesome";
    content: "\f107";
}

.PopupOpen .arrowWidget
{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

Which should result in this:

WITHOUT EITHER:
If you want to be a rebel and use neither, just remove the 'font-family: "FontAwesome"; line and change 'content: "\f107";' to a character or anything of your choosing!

Alright that's it for now!
Like what you see? Consider donating!
https://xenogamers.com/donate/