Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1111559

    Dear Enfold-Team,

    I’m trying to get a hoveranimation working. The goal is to at least let the avaia-buttons animate. With or without Icon, that is not too important.

    So, this is my Code:

    
    .my-custom-button .avia-button .avia_iconbox_title {
        margin: 10%;
        text-align: center;
    }
    
    .my-custom-button .avia-button .avia_iconbox_title {
        color: #fff;
        text-align:center;
        border: none;
        background-size: 300% 100% !important;
    
        border-radius: 50px;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }
    
    .my-custom-button:hover .avia-button:hover .avia_iconbox_title {
        background-position: 100% 0 !important;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }
    
    .my-custom-button .avia-button:focus .avia_iconbox_title {
        outline: none;
    }
    
    .my-custom-button .avia-button {
        background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
        box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
    } 
    

    Basically its workin. I have a Gradient-BG in the buttons, but I cant get them to be grey to even more grey on idle to blue-voilet on hover. Is there a solution or is it just impossible?
    And if it possible, can I add this Animation to nearly every Link? Like the main-menu, social-media-buttons and the send buttons in contactforms?

    Thanks for your time and i wish you a nice day!

    Best regards,
    Videmi

    #1112019

    Hey Videmi,

    Where can we see the result you’re getting?

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #1114826
    This reply has been marked as private.
    #1115352

    Hi,

    Hi,

    Thank you for sharing the details.

    Please add a transition property to the button styles as provided in the below example for smooth animation. You can replace the background color with the gradient.

    For more tips on customization please check the documentation. https://kriesi.at/documentation/enfold/button/#customization

    /* Background on hover */
    .my-custom-button a.avia-button {
    	 background: rgba(0,0,0, .95)	!important;
       transition: all .35s;
    }
    .my-custom-button a.avia-button:hover {
       background: rgba(13,23,56, .45)	!important;
       transition: all .35s;
    }

    Best regards,
    Vinay

    Best regards,
    Vinay

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.