Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 12, 2017 at 11:09 pm #792539
    slui

    Hi,

    I wanted to know if it is possible to convert Enfold’s button into round buttons. If so, how can this be done? Thanks.

    sl

    May 13, 2017 at 12:11 am #792549
    Jordan Shannon

    Hey slui,

    You can use the buttons css class to target them and then adjust the border-radius to round them as much as you need. For example

    .avia-button{
border-radius:60px;
}

    Best regards,
    Jordan Shannon

    May 13, 2017 at 12:21 am #792552
    AgenturWP

    HI,

    My fast fix with a Quick CSS so only defined ones will be around:
    1. you activate custom CSS field => http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
    2. you set to the custom ccss class from the button the css class name example nxh-roundbutton
    3. in the Quick CSS you write

    .nxh-roundbutton .avia-button { border-radius: 50% !important; min-height:100px !important; min-width:100px !important; padding-top:44px !important;}

    Info
    The padding-top is is being computed 50% from min-height, here in the example then 50px and 50% from font-size at 13px font-size is 6 thus 50-6 = 44 and with the min-height and min-width you define the size of the round button ;)

    that’s all

    best regards
    Jörg :D

    • This reply was modified 7 years, 7 months ago by AgenturWP.
    May 13, 2017 at 3:48 pm #792722
    slui

    Thank you to both. Both solutions worked.

    @Nixhalbes – I appreciate the explanation and the ability to target a specific item. Super useful.

    sl

    May 13, 2017 at 8:07 pm #792786
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Convert Enfold Buttons to Round Buttons’ is closed to new replies.