CODEWITHSUNDEEP
cssgoogle-chromefirefoxpadding
Graeme Bryson
Graeme Bryson

Reputation: 193

Chrome button additional padding

Im using Contact Form 7 on my WP site, and I'm experiencing a strange issue with the submit button. Im using the following class for the button:

.ctaredbutton

background-color: #EA3939;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF !important;
font-family: Proxima Nova,Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 22px 30px;
text-transform: uppercase;
margin-left:20px

The button displays as expected in Firefox (http://cl.ly/SQ5Y) but there appears to be extra padding in Chrome (http://cl.ly/SPcr). The form is live at 'elitegolfusa.org/apply'

Has anyone seen this before? I've got no idea where the additional top padding has came from?

Upvotes: 2

Views: 1196

Answers (1)

Mike Barwick
Mike Barwick

Reputation: 5367

Ditch the padding on the top/bottom altogether and use line-height. Set line-height to whatever height you want the button.

.ctaredbutton{
    background-color: #EA3939;
    border-radius: 40px 40px 40px 40px;
    color: #FFFFFF !important;
    font-family: Proxima Nova,Helvetica,sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height:45px; // I added this
    padding: 0 30px; // I changed this
    text-transform: uppercase;
    margin-left:20px
}

Upvotes: 1

Related Questions