Creating a button inside an input field using HTML and CSS

Question

Creating a button inside an input field using HTML and CSS

Is there a way to place a button inside a text input field? I want to achieve this design:

https://i.sstatic.net/q2M9v.png

This is my current code:

input {
        background: #8196aa;
        border: 0;
        border-radius: 10px;
        color: white;
        padding: 20px;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: white;
        }
    }

    button {
        background: #16bdae;
        border: 0;
        border-radius: 7px;
        color: white;
        padding: 15px;
    }

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mail address">
  <button>LOGIN</button>
</div>

If anyone knows how to achieve this, I would greatly appreciate the help. (Previous answers on Stack Overflow didn't solve my issue)

html css

Answer 1

Answer №1

* {
  box-sizing: border-box;
}

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  width: 100%;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.pt-site-footer__submit {
  position: relative;
  display: inline-block;
  width: 50%;
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Enter your email address" />
  <button>SUBMIT</button>
</div>

Answer 2

* {
  box-sizing: border-box;
}

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  width: 100%;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.pt-site-footer__submit {
  position: relative;
  display: inline-block;
  width: 50%;
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Enter your email address" />
  <button>SUBMIT</button>
</div>

Answer 3

Answer №2

I believe this is the solution you are looking for

.pt-site-footer__submit{
  display: inline-block;
  position: relative;
  overflow: hidden;
}
input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  min-width: 320px;
}

button {
  position: absolute;
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  cursor:pointer;
  right: 5px;
  top: 50%;
  transform: translate(0, -50%);
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mail address">
  <button>LOGIN</button>
</div>

Answer 4

I believe this is the solution you are looking for

.pt-site-footer__submit{
  display: inline-block;
  position: relative;
  overflow: hidden;
}
input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  min-width: 320px;
}

button {
  position: absolute;
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  cursor:pointer;
  right: 5px;
  top: 50%;
  transform: translate(0, -50%);
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mail address">
  <button>LOGIN</button>
</div>

Answer 5

Answer №3

Feel free to experiment with the following CSS styling:

button {
    background: #16bdae;
    border: 0;
    border-radius: 7px;
    color: white;
    padding: 15px;
    position: absolute;
    right: 10px;
    top: 5px;
}

.pt-site-footer__submit {
    width: auto;
    float: left;
    position: relative;
}

Answer 6

Feel free to experiment with the following CSS styling:

button {
    background: #16bdae;
    border: 0;
    border-radius: 7px;
    color: white;
    padding: 15px;
    position: absolute;
    right: 10px;
    top: 5px;
}

.pt-site-footer__submit {
    width: auto;
    float: left;
    position: relative;
}

Answer 7

Answer №4

.pt-site-footer__submit{
      position: relative;

}
input {
        background: #8196aa;
        border: 0;
        border-radius: 10px;
        color: white;
        padding: 20px;
        width: 94%;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: white;
        }
    }

  button {
    background: #16bdae;
    border: 0;
    position: absolute;
    border-radius: 7px;
    color: white;
    padding: 6px 15px;
    right: 0;
    top: 0;
    bottom: 0;
    height: 38px;
    margin: auto;
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

Answer 8

.pt-site-footer__submit{
      position: relative;

}
input {
        background: #8196aa;
        border: 0;
        border-radius: 10px;
        color: white;
        padding: 20px;
        width: 94%;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: white;
        }
    }

  button {
    background: #16bdae;
    border: 0;
    position: absolute;
    border-radius: 7px;
    color: white;
    padding: 6px 15px;
    right: 0;
    top: 0;
    bottom: 0;
    height: 38px;
    margin: auto;
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

Answer 9

Answer №5

The input tag is unique in that it is self-closing and cannot contain children. One workaround is to create a wrapper element styled to resemble an input and set a transparent background on the actual input field. Here is an example:

<div class="pt-site-footer__submit">
   <div class="input-wrapper">
       <input type="email" placeholder="Your e-mailadress">
       <button>LOGIN</button>
   </div>
</div>

The styling for this setup might look something like this:

input {
    width: calc(100% - [BUTTON-WIDTH]);
    border: 0;
    color: white;
    background-color: transparent;

    &:focus {
        outline: none;
    }

    &::placeholder {
        color: white;
    }
}

button {
    width: [BUTTON-WIDTH];
    background: #16bdae;
    border: 0;
    border-radius: 7px;
    color: white;
    padding: 15px;
}

input-wrapper {
    background: #8196aa;
    border: 0;
    border-radius: 10px;
    padding: 20px;
}

If needed, we can utilize flexbox or CSS grid to layout and center this component.

Answer 10

The input tag is unique in that it is self-closing and cannot contain children. One workaround is to create a wrapper element styled to resemble an input and set a transparent background on the actual input field. Here is an example:

<div class="pt-site-footer__submit">
   <div class="input-wrapper">
       <input type="email" placeholder="Your e-mailadress">
       <button>LOGIN</button>
   </div>
</div>

The styling for this setup might look something like this:

input {
    width: calc(100% - [BUTTON-WIDTH]);
    border: 0;
    color: white;
    background-color: transparent;

    &:focus {
        outline: none;
    }

    &::placeholder {
        color: white;
    }
}

button {
    width: [BUTTON-WIDTH];
    background: #16bdae;
    border: 0;
    border-radius: 7px;
    color: white;
    padding: 15px;
}

input-wrapper {
    background: #8196aa;
    border: 0;
    border-radius: 10px;
    padding: 20px;
}

If needed, we can utilize flexbox or CSS grid to layout and center this component.

Answer 11

Answer №6

Technically, it is not possible to place the button inside the input field as the input element does not have content in the traditional sense.

One solution is to absolutely position the button and use a translate function to overlay it on top of the input field to achieve the same visual effect.

Below is a code snippet that demonstrates this method, but you will need to carefully adjust the padding and positioning of the button to avoid overlapping the placeholder text.

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  position: relative;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  transform: translate(calc(-100% - 5px), 5px);
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mail address">
  <button>LOGIN</button>
</div>

Answer 12

Technically, it is not possible to place the button inside the input field as the input element does not have content in the traditional sense.

One solution is to absolutely position the button and use a translate function to overlay it on top of the input field to achieve the same visual effect.

Below is a code snippet that demonstrates this method, but you will need to carefully adjust the padding and positioning of the button to avoid overlapping the placeholder text.

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  position: relative;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  transform: translate(calc(-100% - 5px), 5px);
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mail address">
  <button>LOGIN</button>
</div>

Answer 13

Answer №7

Great input from @Abin Thaha. I have a suggestion to enhance the css provided in the response.

Include padding-right: 100px; in the input css to ensure that lengthy text does not overlap with the login button:

* {
  box-sizing: border-box;
}

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  padding-right: 100px; /* <---------- Added right padding here to prevent text flowing under button */
  width: 100%;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.pt-site-footer__submit {
  position: relative;
  display: inline-block;
  width: 50%;
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress" />
  <button>LOGIN</button>
</div>

Answer 14

Great input from @Abin Thaha. I have a suggestion to enhance the css provided in the response.

Include padding-right: 100px; in the input css to ensure that lengthy text does not overlap with the login button:

* {
  box-sizing: border-box;
}

input {
  background: #8196aa;
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 20px;
  padding-right: 100px; /* <---------- Added right padding here to prevent text flowing under button */
  width: 100%;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: white;
}

button {
  background: #16bdae;
  border: 0;
  border-radius: 7px;
  color: white;
  padding: 15px;
  position: absolute;
  right: 5px;
  top: 5px;
}

.pt-site-footer__submit {
  position: relative;
  display: inline-block;
  width: 50%;
}

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress" />
  <button>LOGIN</button>
</div>

Answer 15

Answer №8

input {
        background: #8196aa;
        border: 0;
        border-radius: 10px;
        color: white;
        padding: 20px;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: white;
        }
    }

    button {
        background: #16bdae;
        border: 0;
        border-radius: 7px;
        color: white;
        padding: 15px;
    }

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

Answer 16

input {
        background: #8196aa;
        border: 0;
        border-radius: 10px;
        color: white;
        padding: 20px;

        &:focus {
            outline: none;
        }

        &::placeholder {
            color: white;
        }
    }

    button {
        background: #16bdae;
        border: 0;
        border-radius: 7px;
        color: white;
        padding: 15px;
    }

<div class="pt-site-footer__submit">
  <input type="email" placeholder="Your e-mailadress">
  <button>LOGIN</button>
</div>

Creating a button inside an input field using HTML and CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

The media query in Css3 is not functioning as expected when using max-width

Is there a way to retrieve all CSS styles associated with a specific element?

Can simply adding Bootstrap CDN make a website responsive?

Internet Explorer seems to be having trouble detecting changes made to a jQuery checkbox

Is there a potential white-space issue with jQuery CSS in Internet Explorer versions 7 and 8

navigation bar icons alignment problem

Table-styled div containing a horizontal scrolling div

Quick method to assign child iframe title as index.html <title>title</title>

Determine the total number of days using the bootstrap date range picker

Close the ionicPopup by tapping anywhere

What steps do I need to take in order to integrate an mpg video onto my

React animation failing to render underline animation

Utilizing a custom keyboard with Jquery for a recurring function

Display an HTML code snippet on the webpage

Unlocking fashion with $refs: A step-by-step guide

Fetch data in JSON format from a specified URL

.click function failing to trigger on dynamically loaded form

Issue encountered when trying to attach a hover event to the items in a comb

What are the steps for adding information to a MySQL database with GWT, HTML, and either JDBC or Hibernate?

Appear and disappear div