Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #916118

    Dear, I need to give a rounded (border-radius) edge to the buttons that I believe in place, but, I do not know how to do it and it looks good, since I am deformed:

    Another question I have is that I can put the buttons that are in the image, side by side horizontally, but not separated? for example as in the EndFold OnePage demo:
    dual buttons

    On the other hand, I need to change the background color of the social buttons of the header and the footer, I do not know how to do it:
    icons background

    Thank you.
    Norberto

    • This topic was modified 6 years, 7 months ago by buscoseo.
    #916284

    Hey buscoseo,

    We are releasing a new update that will do support the buttons like that.
    Regarding the border-radius, please add the following CSS

    .avia-btn { border-radius: 5px; }

    Best regards,
    Basilis

    #916352

    Hello, thanks for the answer.

    I have added the css code, but do not see changes, the buttons remain the same, I have tried several browsers.

    When do you think they will launch the update?

    On the other hand, I need to change the color of the social buttons of the header and the footer, I do not know how to do it.

    Thank you.

    #916523

    Hi,

    Please try this instead for the border radius:

    a.avia-button {
      border-radius:20px !important;
    }

    We try to put out one update per week now, it will likely be released early next week.

    Best regards,
    Rikard

    #924266

    hello, has already launched the new version that allows you to order lso buttons as I show in the image?

    On the other hand, I need to change the background color of the social buttons of the header and the footer, I do not know how to do it:
    icons background.

    #924512

    Hi,

    Best regards,
    Victoria

    #924960

    Hi, Victoria, thanks for the reply.
    I mean this:

    I would like to leave it like this:
    img2
    ————————

    Another moderator, told me a few weeks ago that thema would be updated and would allow this configuration with the buttons.

    On the other hand, I would like to know how to change the background color of the social icons of the header and footer.
    img3

    Thank you.

    • This reply was modified 6 years, 7 months ago by buscoseo.
    #925006

    Hi,
    I looked at your page and it seems the buttons already have the radius applied:
    2018-03-10_125848
    Perhaps try clearing your site & browser cache.
    You can change the social icons background-color by adding this code in the General Styling > Quick CSS field with the colors you want:

    #top #wrap_all .av-social-link-facebook:hover  a{color:#fff; background-color:#621AAC!important;  }
    #top #wrap_all .av-social-link-twitter:hover   a{color:#fff; background-color:#621AAC!important;  }
    #top #wrap_all .av-social-link-instagram:hover a{color:#fff; background-color:#621AAC!important;  }
    

    Best regards,
    Mike

    #925137

    hello, thanks, I was referring to how to put two buttons vertically aligned like this image:
    img7

    Your partner, I commented, that this would be available in an update of the theme.

    Thank you.

    #925226

    Hi,
    If you would like this today for the two buttons at the top of your page, please add this code in the General Styling > Quick CSS field:

    .avia-button-center.avia-builder-el-3,.avia-button-center.avia-builder-el-4 {
    display: inline-block !important;
    }
    .avia-button-center.avia-builder-el-3 {
    margin-left: 23%;
    }

    Best regards,
    Mike

    #925308

    Thanks Mike, it has been very good, but there is a problem from the mobile devices, it looks decentered, can be centered when viewed from a mobile resolution?

    Now it looks like this from a cell phone:

    • This reply was modified 6 years, 7 months ago by buscoseo.
    #925488

    Hi,
    Please update the code to this, so that the buttons will stay stacked on mobile devices.

    @media only screen and (min-width: 767px) {
    .avia-button-center.avia-builder-el-3,.avia-button-center.avia-builder-el-4 {
    display: inline-block !important;
    }
    .avia-button-center.avia-builder-el-3 {
    margin-left: 23%;
    }
    }

    Best regards,
    Mike

    #986970

    Hello,
    I have the same problem. My customer wants the icon background it’s visible not only in hover effect.
    I added this code:
    #top #wrap_all .av-social-link-facebook a{color:#fff; background-color:#254399!important; }
    #top #wrap_all .av-social-link-twitter a{color:#fff; background-color:#159dff!important; }
    #top #wrap_all .av-social-link-youtube a{color:#fff; background-color:#e90c13!important; }
    #top #wrap_all .av-social-link-instagram a{color:#fff; background-color:#9c28a7!important; }
    but the icon have the same background. I’m doing something wrong, I think.

    #986972

    cache problem. Sorry :)

    #987244

    Hi,
    Glad to hear it is resolved.

    Best regards,
    Mike

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Buttons with rounded edge and color background icons’ is closed to new replies.