Custom Submit button: almost there... « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

biagio111
Member
Trying to use a rollover image for my submit button. You can see what I'm trying to do on my sandbox site here:

http://www.accessdv.com/d2dl

Originally I'd tried using the custom button option in the advanced settings of the form itself, but of course, as it's a rollover image, it showed the whole thing. Right now, I'm targeting the button like this:
```
.button {

background: url(images/submit.png) 0 0;
border: none;
cursor: pointer;
width: 101px;
height: 32px;
float: left;
margin: 0 499px 0 0;
}

.button:hover {
background: url(images/submit.png) 0 -32px;
}
```
That pretty much works, but you can still see some of the "base button" behind it...haven't been able to turn that off. Any help appreciated. Thanks!

Biagio
Posted 13 years ago on Saturday November 27, 2010 | Permalink
biagio111
Member
Forgot one last thing, which I'm sure you'll see: similarly trying to target the field shape with the field from the theme, but have them both showing up. Targeted it like this:
```
.large {
background: url(images/fields.png) 0 0;
}
```
http://www.accessdv.com/d2dl

I'm still a css newbie, so thanks for your patience.
Best,
Biagio
Posted 13 years ago on Saturday November 27, 2010 | Permalink
Kevin Flahaut
Administrator

When you use CSS to do the image replacement tecnique, you have to hide the default text by using a negative text-indention.

body #gform_wrapper_1 .gform_footer input.button {text-indent:-9000px]

on the input field, it just looks like you want to turn the border off and then tweak the size a little

body #gform_wrapper_1 input#input_1_1 {border:none}

test screenshot: http://grab.by/7BqR

You'll notice I used a specific CSS inheritance and unique input ID rather than just using the simple .large and .button classes. Unless you really plan to use that background on every field in every form with a .large class, it's better to be more specific. The same goes for the .button class.

Hope that helps.

Posted 13 years ago on Saturday November 27, 2010 | Permalink
biagio111
Member

Kevin,
Clearly, getting the developer license yesterday is not something I'll ever regret. Of every paid service I've ever been a part of, you are the fastest, most responsive guy I've ever seen. Surfing the forums last night, where I was able to find your answers to many questions, I learned a lot...not the least of which was how much you care about your customers.

Your answers were perfect, and now I understand how to target things properly...thanks! Everything's working.

Best,
Biagio

Posted 13 years ago on Saturday November 27, 2010 | Permalink
Kevin Flahaut
Administrator

@Biagio,

Thanks so much for the kind words. We try really hard to provide the best service we can and I'm very pleased to hear that you're happy. If you need any other help, don't hesitate to ask.

Posted 13 years ago on Saturday November 27, 2010 | Permalink