1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Animated Arrow Button 1.0

Make that arrow thing animated!

  1. silence
    Compatible XF Versions:
    • 1.0
    • 1.1
    • 1.2
    • 1.3
    • 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.png
    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/

Recent Updates

  1. uhhhh

Recent Reviews

  1. Cibox
    Cibox
    5/5,
    Version: 1.0
    Looks nice and easy setup