How to make an input box like this without the outline on input also with rounded 'Submit' button

Input Design : [1]: https://i.stack.imgur.com/DwHHY.png

CodePudding user response：

As Prathik K said in his answer, this would be fun to try, so it would be better to make it yourself. However one thing to note after seeing your image: Try using this to get rid of your input's border:

.your-input {
    border: none; 
}

CodePudding user response：

I can give the code but it'll be fun if you try it.

1. Create nested div classes for 'email' image, input box and submit button.
2. You just need to experiment with : border-radius, border, padding for the rounded effect and other styling.

I would recommend codepen.io to search if you're still stuck.

To get the final result powerful libraries like angular material would help. But of course depends on your framework