Tagged: , , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 18, 2016 at 7:45 pm #662232
    Demaup

    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 8 years, 4 months ago by Demaup.
    July 19, 2016 at 12:58 pm #662446
    Rikard

    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

    July 21, 2016 at 11:55 pm #663630
    Demaup

    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

    July 22, 2016 at 10:55 am #663762
    Vinay

    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

    July 24, 2016 at 1:06 am #664269
    Demaup

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

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Add a new button style’ is closed to new replies.