Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 9, 2016 at 8:32 am #658710
    fleurlewis

    Hi

    Hoping you can help me change the height of two different types of buttons on my website.

    The first is on the home page. they are avia buttons.

    The second is on the contact page, they are buttons I created using a form plugin.

    I’d like there to be the same amount of space both above and below the text on the buttons, and I think the best way to do this is to change the button height?

    I’ll add my login details below.

    Thanks
    Fleur

    July 11, 2016 at 12:15 pm #659192
    fleurlewis

    Can you help please?

    July 11, 2016 at 3:11 pm #659319
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .home .avia-button {
    margin-top: -5px;
}

    If that does not help, please post a screenshot and show the changes you would like to make. You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.

    Best regards,
    Yigit

    July 14, 2016 at 1:54 am #660624
    fleurlewis

    Hi, this didn’t seem to do the trick.

    I’ve added a link to some screen shots in the private content below.

    I have some custom CSS in place at the moment to try and get the buttons to look identical but it’s not quite right.

    Avia buttons

    body div .avia-button {
    border-radius: 1px;
    }

    body .avia-button.avia-color-theme-color {
    font-family: Frontage-Bold;
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0px !important;
    border-bottom: 0px !important;
    }

    body .avia-button.avia-color-theme-color:hover {
    color: white;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    background-color: #919191;
    }

    Contact form button

    .main_color input[type=’submit’] {
    font-family: Frontage-Bold;
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0px !important;
    border-bottom: 0px !important;
    }

    .main_color input[type=’submit’]:hover {
    color: white !important;
    text-shadow: 0 1px 0 rgba (255, 255, 255, 0.1);
    background-color: #919191;
    }

    July 17, 2016 at 7:09 am #661702
    Ismael

    Hey!

    Thank you for the info. You can adjust the padding of the contact form button to be the same as the home page buttons.

    input.wpcf7-form-control.wpcf7-submit {
    padding: 15px 30px 13px;
}

    Best regards,
    Ismael

    July 18, 2016 at 10:02 am #661905
    fleurlewis

    Thanks – that gives me the control I was after for the contact form button!

    Could you please let me know how I can also change the padding on the home page buttons?

    I’ve tried editing this CSS and adding in the padding I want, but it hasn’t worked.

    .main_color input[type=’submit’] {
    font-family: Frontage-Bold;
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    letter-spacing: 0px !important;
    border-bottom: 0px !important;
    }

    .main_color input[type=’submit’]:hover {
    color: white !important;
    text-shadow: 0 1px 0 rgba (255, 255, 255, 0.1);
    background-color: #919191;
    }

    July 18, 2016 at 2:10 pm #661969
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .home .avia-button.avia-color-theme-color {
    padding-bottom: 20px;
}

    Best regards,
    Vinay

    July 19, 2016 at 8:06 am #662351
    fleurlewis

    Perfect, thank you!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Change button height’ is closed to new replies.