"stylize Submit Button for Form" (#1558067) / ThemeNectar

Comments

Marc started the conversation
April 29, 2018 at 12:09pm
How can I stylized the Submit Button for a Form in Sailent (8.5.5) Contactform? I already saw that in the Sailent Menu there is a option for the Form styling. There I set the style to default. But I want to style it completly by myself in CSS to perfectly match the look on the rest of the site.

3,034

Andrew replied

April 29, 2018 at 3:16pm

Hi Marc,

To start you can use this CSS:

input[type=submit]{
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -o-border-radius: 5px 5px 5px 5px;
    color: #FFF;
    font-family: 'Open Sans';
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 13px 18px;
    position: relative;
    text-transform: uppercase;
    top: -3px;
    margin-bottom: 10px;
    opacity: 1;
    line-height: 20px;
    background-color: red;
    display: inline-block;
}

you can tweak \ change it to what you need your buttons to look like.

Hope you can work from there.

Marc replied

April 29, 2018 at 6:12pm

Thanks I think I was just thinking to complicated when it came to the classnames. I decided me now for this CSS Code.

input[type=submit]{
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -o-border-radius: 5px 5px 5px 5px;
    color: #ffffff;
    font-family: "proxima-nova",sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 13px 18px;
    position: relative;
    text-transform: uppercase;
    top: -3px;
    margin-bottom: 10px;
    opacity: 1;
    line-height: normal;
    background-color: transparent;
    display: inline-block;
    border: solid 1px #252525;
}
input[type=submit]:hover{
    background-color: #ffffff !important;
    color: #000000 !important;
}