White line in button?

[evangelize]

Hi!

I have a grey button on our website.  It has a white line in it for some reason, and I don't know why.  Please see the attached screenshot and let me know how I can fix it.  Thanks!  The website link is http://www.stjohnsmarshfield.org/

God Bless,

Dave

[PaulMathews]

@evangelize Looks like you're using an older Weebly theme where they used background image sprites to create buttons. I'd advise you to contemplate moving to a newer, mobile-friendly theme at some point in the not too distant future. For now, you can update your buttons to a more contemporary styling approach with some additional button styling code. What we'll do below is change your button background color from the dull gradient grey image to the dark red hyperlink color and we'll change the button text color from black to white. We'll add a color hover effect as well where the button will change from the dark red link color to a dark grey.

In the Site Editor, click on "Theme" in the top navigation then click the "Edit HTML/CSS" button at the bottom of the left-hand sidebar to get to the site's CSS code editor. You can scroll to the bottom of the code and then add all of the following new code which should override the old button background image styling with proper background color styling.

.wsite-button-large {
    /* Remove old Weebly button background image, replace with link color background, add rounding on button edges */
    background-image: none!important;
    background: #880110!important;
    border-radius: 4px!important;
}

.wsite-button-large .wsite-button-inner {
    /* Remove old Weebly button background image, change text color to white, make left/right padding uniform */
    background-image: none!important;
    color:#ffffff!important
    padding:0 25px!important;
}

.wsite-button-large .wsite-button-inner:hover { 
    /* Change background to dark grey on hover */
    background: #404040!important; 
}

Your restyled button should now look like this (it will change to dark grey when you hover over it):

[evangelize]

Thanks Paul for such a comprehensive answer! 

I added the code and now the white line is gone.  Thanks!  However when I hover the button doesn't completely turn grey, there is a bit of red remaining on the right side.  You can see the button I created on this page. http://www.stjohnsmarshfield.org/formedorg.html

Could you help me with that please?

God Bless,

Dave

[PaulMathews]

@evangelize Sorry, there were a couple of issues with the provided code.

In the first code block, the padding needs to be zeroed out. The first code block I provided looked like this:

.wsite-button-large {
    /* Remove old Weebly button background image, replace with link color background, add rounding on button edges */
    background-image: none!important;
    background: #880110!important;
    border-radius: 4px!important;
}

To zero out the padding, you'll need to add the zero padding attribute to this block (highlighted in red text below):

.wsite-button-large {
    /* Remove old Weebly button background image, replace with link color background, add rounding on button edges */
    background-image: none!important;
    background: #880110!important;
    border-radius: 4px!important;
    padding: 0!important;
}

In the second code block, there's a missing semi-colon. And you'll also need to specify rounding in that block too. The second code block I provided looked like this:

.wsite-button-large .wsite-button-inner {
    /* Remove old Weebly button background image, change text color to white, make left/right padding uniform */
    background-image: none!important;
    color:#ffffff!important
    padding:0 25px!important;
}

There's an error here and it's with the missing semi-colon right after the "important" qualifier in the "color" attribute. Additionally, you need to also specify button rounding here as you did in the first code block. I've highlighted the code updates in red below (semi-colon at the end of the important qualifier on the color attribute and the addition of the border-radius attribute):

.wsite-button-large .wsite-button-inner {
    /* Remove old Weebly button background image, change text color to white, make left/right padding uniform */
    background-image: none!important;
    color:#ffffff!important;
    padding:0 25px!important;
    border-radius:4px!important;
}

[evangelize]

All fixed, thanks again!