Pinnacle- Button CSS for Contact Form 7

Resolved

(@ruby06dawnbrooke)

Hello!
Sorry that asking a bit to much, but I’m wondering if you can give me an code for my Contact Form 7’s submit button like the other one you gave me? I don’t know how to edit code.

Like this one:

.benchmarkemaillite-subscribe input[type="submit"] {
    padding: 10px 16px;
    margin-top: 10px;
    border: none;     display: inline-block;     background: #8e8e8e;
    color: #fff;     transition: background .6s ease-out;     -webkit-transition: background .6s ease-out;     -moz-transition: background .6s ease-out;     -o-transition: background .6s ease-out;     box-shadow: 0 -3px rgba(0,0,0,.1) inset;     -moz-box-shadow: 0 -3px rgba(0,0,0,.1) inset;     -webkit-box-shadow: 0 -3px rgba(0,0,0,.1) inset;     -o-box-shadow: 0 -3px rgba(0,0,0,.1) inset;     -webkit-border-radius: 4px;     -moz-border-radius: 4px;     border-radius: 4px;
}
.benchmarkemaillite-subscribe input[type="submit"]:hover {
    color:#fff;
    background:#bbb;
}

The link(s):

http://midnightsky.dawnbrooke.com/right-your-e-book/
http://midnightsky.dawnbrooke.com/submit-entries-for-your-book/
http://midnightsky.dawnbrooke.com/contact-us/

Thanks for all this help.

Viewing 11 replies - 1 through 11 (of 11 total)

Ben Ritner – Kadence WP
(@britner)

11 years ago
Sure you can use css like this:
```
.wpcf7 input.wpcf7-submit {
    color: #fff;
    background: #000;

}
.wpcf7 input.wpcf7-submit:hover {
    color:#fff;
    background:#bbb;
}
```
Kadence Themes
Thread Starter ruby06dawnbrooke
(@ruby06dawnbrooke)

11 years ago

Ok! Thanks.

Thread Starter ruby06dawnbrooke
(@ruby06dawnbrooke)

11 years ago

Where do you put it though?

hannah
(@hannahritner)

10 years, 12 months ago

ruby06dawnbrooke,
Sorry for the delay! You can paste that in your custom css box in Theme Options > Custom CSS.

Hannah

Thread Starter ruby06dawnbrooke
(@ruby06dawnbrooke)

10 years, 12 months ago

But how come it some how doesn’t work again though?

Ben Ritner – Kadence WP
(@britner)

10 years, 12 months ago

I just looked at your link above and I don’t see the css I posted in your custom css box in the theme options? You need to add below your other css.

Kadence Themes

Thread Starter ruby06dawnbrooke
(@ruby06dawnbrooke)

10 years, 11 months ago

I did, but it only made the button black :/
Ben Ritner – Kadence WP
(@britner)

10 years, 11 months ago
That is what the code above was supposes to do. You can change the colors to what you want. like:
```
.wpcf7 input.wpcf7-submit {
    color: #fff;
    background: #8e8e8e;

}
.wpcf7 input.wpcf7-submit:hover {
    color:#fff;
    background:#bbb;
}
```
Kadence Themes
Thread Starter ruby06dawnbrooke
(@ruby06dawnbrooke)

10 years, 11 months ago

But can it round the corners? Sorry for asking so much.
hannah
(@hannahritner)

10 years, 11 months ago
Try adding this:
```
.wpcf7 input.wpcf7-submit {
    border-radius: 50%;
}
```
Hannah
Thread Starter ruby06dawnbrooke
(@ruby06dawnbrooke)

10 years, 11 months ago

Thx Hannah!

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Pinnacle- Button CSS for Contact Form 7’ is closed to new replies.