Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 18, 2020 at 3:20 am #1261191
    ASMA1342

    Hi there at support,
    I’ve spent several hours searching the support topics and trying out the css – but I can’t get control over all the attributes of full-width buttons.
    I need the css to control:
    — padding
    — margin
    — font-size
    — font-color
    — background-color
    — corner radius

    Hope you can help with this.
    Many thanks
    Frances

    November 19, 2020 at 5:20 am #1261449
    Rikard

    Hi Frances,

    Could you post a link to where we can see the actual element you are trying to target please?

    Best regards,
    Rikard

    November 19, 2020 at 8:55 am #1261479
    Guenni007

    if you do not want to influence all fullwidth buttons on all pages – you should give to those fullwidth-buttons a custom-class.
    in my case i use for that : fullwidth-specialbutton

    because of the inline setting of most of those values we had to use !important on most of the rules

    #top .fullwidth-specialbutton .avia-button.avia-button-fullwidth {
  padding: 40px !important;
  margin: 40px 30px !important;
  width: calc(100% - 60px) !important; /*** this has to correspond to your margin (left/right) settings ***/
  background-color: yellow;
  color: #333 !important;
  border-radius: 20px !important;
  border: 2px solid #333 !important;
  box-shadow: 2px 2px 15px #333;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease
}

#top .fullwidth-specialbutton .avia-button.avia-button-fullwidth:hover {
  background-color: darkblue;
  color: #FFF !important;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease
}

/*** this background is on enfold for highlite status - we do that with hover-style ***/
#top .fullwidth-specialbutton .avia-button.avia-button-fullwidth .avia_button_background {
  display: none
}

#top .fullwidth-specialbutton .avia-button.avia-button-fullwidth .avia_iconbox_title, 
#top .fullwidth-specialbutton .avia-button.avia-button-fullwidth .avia_button_icon {
  font-size: 50px !important;
}
    December 14, 2020 at 4:12 am #1266988
    ASMA1342

    Styling of full-width buttons

    – – – – – – – – – – –
    Hi Guennei007
    Thank you for the CSS for styling full-width buttons.
    At first I thought it wasn’t working.
    Now I see that – strangely – it is working for Pages but not for Posts.
    Is there something specific I need to do to make it work for Posts?
    Many thanks,
    Frances

    December 15, 2020 at 4:50 am #1267351
    Rikard

    Hi Frances,

    Could you post links to where we can see it working, and not working please?

    Best regards,
    Rikard

    January 16, 2021 at 11:44 am #1272917
    ASMA1342
    This reply has been marked as private.
    January 18, 2021 at 5:54 am #1273226
    Rikard

    Hi,

    Thanks for that. Could you assign classes to the buttons you want to alter please? You can do so in the Advanced tab in the element options. After that then you can use CSS like this:

    .custom-class, .custom-class .avia-button {
    width: 100%;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.