Styling a button to sit inside an input field

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

@gkt

You could try something like this for mobile:

image

.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:

image

1 Like

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

And this on mobile:

@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%;
}
1 Like

Works perfectly. Thanks for all your help Sam. :raised_hands: :smiling_face: