Styling a button to sit inside an input field

[gkt (Gareth K Thomas)]

Hoping someone can help with this.

I’m using some custom CSS to style a newsletter form. I have the ‘submit’ button sitting inside the input field.

It looks OK on desktop:

It doesn’t look so good on mobile:

Any thoughts on how to get it working well across devices?

Thanks ~ G

---

Here is my site Read-Only: Webflow - PB12

[sam-g]

@gkt

You could try something like this for mobile:

.custom-search-botton {
    background: #323a3a;
    border: 0;
    border-radius: 4px;
    color: white;
    padding: 7px 10px;
    position: absolute;
    right: 3px;
    top: 50%;
    /* bottom: 0; */
    transform: translateY(-50%);
}

This is the result:

[gkt (Gareth K Thomas)]

Thanks for your help. I’ve tried what you’ve suggested and I’m getting this on desktop:

And this on mobile:

[sam-g]

@gkt add position relative to your form element:

#wf-form-Newsletter-Sign-up {
  position: relative;
}

I would also add a max-height and adjust the padding on your button as well:

.custom-search-botton {
    background: #323a3a;
    border: 0;
    border-radius: 4px;
    color: white;
    padding: 4px 14px;
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    max-height: 90%;
}

[gkt (Gareth K Thomas)]

Works perfectly. Thanks for all your help Sam.