I'm trying to learn HTML & CSS and tried to make a basic login form with CSS3 effects. The link are here below to the code.
Demo - http://codepen.io/anon/pen/PwaLBE
HTML
<form action="" method="">
<input type="text" name="username" placeholder="Användarnamn">
<input type="password" name="password" placeholder="Lösenord"><br>
<input type="submit" name="login" value="Logga in">
<a href="#">Glömt lösenord?</a>
<a href="#">Registrera</a>
</form>
CSS
body {
margin: 0;
padding: 0;
}
form {
margin-top: 200px;
font-family: Helvetica, sans-serif;
text-align: center;
}
/* Input text actions */
input[type="text"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="text"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="text"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input password actions */
input[type="password"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="password"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="password"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input submit-button actions */
input[type="submit"] {
margin-top: 5px;
margin-left: -112px;
color: #FFFFFF;
background-color: #16a085;
padding: 10px;
border: solid 1px #FFFFFF;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="submit"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Link actions */
a {
font-size: 12px;
transition: color 0.5s;
font-family: Helvetica, sans-serif;
text-decoration: none;
list-style: none;
color: #3498db;
}
a:hover {
color: #2980b9;
}
There are some problems:
"glömt lösenord" & "Registrera" are not under the password form to the right. How can I move the links to the right precisely under the form to the right?
The "Logga in" button seems to be under the form to the left, but zoom once or twice and the position will change.
Why do I have margin-left: -112px; under the Input submit for? That value looks weird but its their it is under the form to the left.
And the last problem, the links "Glömt lösenord" & "Registrera" are in the middle of the button to the left, how can I take them down so they are at the same level as the button to the left?
EDIT: If you click on the button, it will take some small amount of time to be clicked, how can I change that time without changing for the inputs?
http://codepen.io/anon/pen/LEraqb
body {
margin: 0;
padding: 0;
}
form {
margin-top: 200px;
font-family: Helvetica, sans-serif;
text-align: center;
}
/* Input text actions */
input[type="text"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="text"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="text"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input password actions */
input[type="password"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="password"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="password"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input submit-button actions */
input[type="submit"] {
margin-top: 5px;
margin-left: -112px;
color: #FFFFFF;
background-color: #16a085;
padding: 10px;
border: solid 1px #FFFFFF;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="submit"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Link actions */
a {
font-size: 12px;
transition: color 0.5s;
font-family: Helvetica, sans-serif;
text-decoration: none;
list-style: none;
color: #3498db;
}
a:hover {
color: #2980b9;
}
1- How can I move the links to the right precisely under the form to the right?
I used a float:right
Using flexboxes could be another way.
2- zoom once or twice and the position will change.
some sizes was defined in pixel, so it is static and doesn't resists to all layouts.
- About negative margins:
https://stackoverflow.com/questions/4989930/using-css-negative-margins-a-good-or-bad-practice
http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
3- And the last problem, the links "Glömt lösenord" & "Registrera" are in the middle of the button to the left, how can I take them down so they are at the same level as the button to the left?
I prefer like that!
4- If you click on the button, it will take some small amount of time to be clicked, how can I change that time without changing for the inputs?
the css animation seems to have to finish before the action occurs.
There are many questions, will try to cover it all.
First of all, remove text-align: center; on the <form> that will make the other tasks easier to solve.
Secondly, add <p> or <div> etc to wrap your input fields.
Also want to say I love the cleanness of your code, very good start. Don't be afraid to use some classes or ids.
See the blow updated code based on yours, demo - http://jsfiddle.net/78ds0jpt/
HTML
<form action="" method="">
<p>
<input type="text" name="username" placeholder="Användarnamn">
<input type="password" name="password" placeholder="Lösenord">
</p>
<p>
<input type="submit" name="login" value="Logga in">
<span>
<a href="#">Glömt lösenord?</a>
<a href="#">Registrera</a>
</span>
</p>
</form>
CSS
body {
margin: 0;
padding: 0;
}
form {
/* margin-top: 200px; */
font-family: Helvetica, sans-serif;
/* text-align: center; */
}
form p {
margin: 10px;
}
form p span {
padding-left: 130px;
}
/* Input text actions */
input[type="text"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="text"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="text"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input password actions */
input[type="password"] {
width: 150px;
padding: 10px;
border: solid 1px #dcdcdc;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="password"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="password"]:focus {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
/* Input submit-button actions */
input[type="submit"] {
margin-top: 5px;
/* margin-left: -112px; */
color: #FFFFFF;
background-color: #16a085;
padding: 10px;
border: solid 1px #FFFFFF;
transition: box-shadow 0.3s, border 0.3s;
}
input[type="submit"]:hover {
border: solid 1px #707070;
box-shadow: 0 0 5px 1px #969696;
}
input[type="submit"]:focus {
outline: 0;
}
/* Link actions */
a {
font-size: 12px;
transition: color 0.5s;
font-family: Helvetica, sans-serif;
text-decoration: none;
list-style: none;
color: #3498db;
}
a:hover {
color: #2980b9;
}
When you work with a form, it is suggested to wrap it into selector, as in;
body should have value: margin:0 auto;
#mywrapper{
margin:0 27%; /*you can set it by yourself*/
max-width:38%;
}
after that, you can wrap the 2 links as follows:
UPDATED:
span .mylinks{
float:right;
padding-right:5px;
}
so. it should be like this:
<div id="mywrapper">
<form action="" method="">
<input type="text" name="username" placeholder="Användarnamn" />
<input type="password" name="password" placeholder="Lösenord" />
<br/>
<input type="submit" name="login" value="Logga in" />
<a href="#">Glömt lösenord?</a>
<a href="#">Registrera</a>
</form>
</div>
Demo HERE
