Tagged: , , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #662232

    Hey guys,

    I’ve tried to search and test several things but impossible to do what I want. I would like to create a new button style (no change to the shortcode, just adding one more button style).

    Here is the code of the new button I would like to add :

    .button {
        background-color: #2ecc71; /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
        border-radius : 25px;
    }
    
    .button1 {
        background-color: white;
        color: #2ecc71;
        border: 2px solid #2ecc71;
    }
    
    .button1:hover {
        background-color: #2ecc71;
        color: white;
    }

    Can you explain me please :
    1. How to add the new style
    2. How to add a button with this new style in one page (which shortcode : HTML or BUTTON)

    Thanks guys for your help

    • This topic was modified 3 years, 4 months ago by  Demaup.
    #662446

    Hi Demaup,

    Could you provide us with a link to the site in question so that we can take a closer look please? Also please point out the element you want to style.

    Best regards,
    Rikard

    #663630

    Hey Rikard,

    Website link : laboitenumerique.fr
    What I want to style : button below each image. Just create a new button style (with a special hover effect).

    Thanks

    #663762

    Hi,

    An easy way to do this would be to enable custom css class name support for builder elements and use custom css to target them. http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Or if you like to target all buttons on the site use the below css class names with your custom css styles.

    .avia-button{
    /*button style*/
    }
    
    .avia-button:hover{
    /*button hover style*/
    }

    Let us know if you have any questions.

    Best regards,
    Vinay

    #664269

    I’ll try it! Thanks for your help guys.

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

The topic ‘Add a new button style’ is closed to new replies.