How can I resize the button to the size of the window?
I made this very simple form with an image as a button.
Is there a way to resize the button to the size of the window the same as typing - i.e. the button gets smaller as the window does it?
This is the html:
<form action="send_form_email.php" method="GET" enctype="multipart/form-data" name="EmailTestForm">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<button type="submit" class="button"></button>
</form>
</body>
This is the CSS:
form {
position:relative;
top:10px;
margin-left: 25%;
max-width:100%;
}
.form-control {
position: relative;
top: 65px;
left:0px;
padding: 16px;
width: 35vw;
height: 1.8vw;
font-size: 20px;
}
.button {
position: relative;
top: 0px;
left: 40vw;
border: 0;
background: url(http://i.imgur.com/9n3Zvcr.png) no-repeat;
width: 210px;
height: 75px;
}
I've tried setting the button width as a percentage and using the max width, to no avail. I'm not sure if a media query can be used to smoothly scale a button.
I started learning html three days ago, so I really don't understand what I am doing.
source to share
Try using percentages rather than pixels.
So, if you want to make it responsive, do something like this:
width:5%; //Will take 5% of the page
width:50%; //Will take half of the page
Using percentages can be difficult, but it's the easiest way to make a button responsive.
To learn more about CSS, Javascript, HTML5, PHP and others, please visit: http://www.w3schools.com/
source to share
Here's a solution that might be a good starting point for you: http://jsfiddle.net/bz60swhf/ .
HTML:
<form>
<input type="email" placeholder="Enter email">
<button type="submit">
<img src = "http://i.imgur.com/9n3Zvcr.png" />
</button>
</form>
CSS
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
form {
display: table;
width: 100%;
text-align: center;
}
form > input[type = "email"] {
outline: 1px solid gray;
font: normal 20px/2 Sans-Serif;
width: 70%;
display: inline-block;
vertical-align: middle;
}
button {
max-width: 30%;
height: 40px;
background: 0;
text-align: left;
vertical-align: middle;
}
button > img {
height: 100%;
}
@media screen and (max-width: 394px) {
button > img {
height: auto;
width: 100%;
}
source to share