Animated Arrow Button

Unmaintained Animated Arrow Button 1.0

No permission to download
Compatible XF 1.x versions
  1. 1.0
  2. 1.1
  3. 1.2
  4. 1.3
  5. 1.4
Visible branding
No
0668667e78144a3cbe3b3156402e451e.gif
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:
Untitled-2.webp

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:
ead5ed9b9c293c2ca16603bb4ced7546.gif


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:
0668667e78144a3cbe3b3156402e451e.gif

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/
Author
silence
Downloads
24
Views
674
First release
Last update

Ratings

5.00 star(s) 1 ratings

More resources from silence

Latest updates

  1. uhhhh

    There is no download?

Latest reviews

Looks nice and easy setup
Back
Top Bottom