[huuthi95]

HTML

As usual, we will start by creating forms, you copy the html standard frame as follows:

Code: (Select All)

<form>
 <input checked id='signin' name='action' type='radio' value='signin'>
 <label for='signin'>Sign in</label>
 <input id='signup' name='action' type='radio' value='signup'>
 <label for='signup'>Sign up</label>
 <input id='reset' name='action' type='radio' value='reset'>
 <label for='reset'>Reset</label>
 <div id='wrapper'>
   <div id='arrow'></div>
   <input id='email' placeholder='Email' type='text'>
   <input id='pass' placeholder='Password' type='password'>
   <input id='repass' placeholder='Repeat password' type='password'>
 </div>
 <button type='submit'>
   <span>
     Reset password
     <br>
     Sign in
     <br>
     Sign up
   </span>
 </button>
</form>

[font=Tahoma, Arial, sans-serif]CSS[/font]

[font=Tahoma, Arial, sans-serif]And your work is also extremely simple to copy the css below to create effects for the form, you can refer to each paragraph to see how they create the effect, so that you can creative in their own way.[/font]

Code: (Select All)

body, html {
 margin: 0;
 padding: 0;
}

html, body { margin: 0; }

:focus { outline: none; }
::-webkit-input-placeholder { color: #DEDFDF; }
::-moz-placeholder { color: #DEDFDF; }
:-moz-placeholder { color: #DEDFDF; }
::-ms-input-placeholder { color: #DEDFDF; }

body {
 background: #6ED0F6;
 color: #fff;
 font-family: 'Raleway', sans-serif;
 -webkit-font-smoothing: antialiased;
}

#wrapper, label, #arrow, button span { transition: all .5s cubic-bezier(.6,0,.4,1); }

#wrapper { overflow: hidden; }

#signin:checked ~ #wrapper { height: 178px; }
#signin:checked ~ #wrapper #arrow { left: 32px; }
#signin:checked ~ button span { transform: translate3d(0,-72px,0); }

#signup:checked ~ #wrapper { height: 262px; }
#signup:checked ~ #wrapper #arrow { left: 137px; }
#signup:checked ~ button span { transform: translate3d(0,-144px,0); }

#reset:checked ~ #wrapper { height: 94px; }
#reset:checked ~ #wrapper #arrow { left: 404px; }
#reset:checked ~ button span { transform: translate3d(0,0,0); }

form {
 width: 450px;
 height: 370px;
 margin: -185px -225px;
 position: absolute;
 left: 50%;
 top: 50%;
}

input[type=radio] { display: none; }

label {
 cursor: pointer;
 display: inline-block;
 font-size: 22px;
 font-weight: 800;
 opacity: .5;
 margin-bottom: 30px;
 text-transform: uppercase;
}
label:hover {
 transition: all .3s cubic-bezier(.6,0,.4,1);
 opacity: 1;
}
label[for="signin"] { margin-right: 20px; }
label[for="reset"] { float: right; }
input[type=radio]:checked + label { opacity: 1; }

input[type=text],
input[type=password] {
 background: #fff;
 border: none;
 border-radius: 8px;
 font-size: 27px;
 font-family: 'Raleway', sans-serif;
 height: 72px;
 width: 99.5%;
 margin-bottom: 10px;
 opacity: 1;
 text-indent: 20px;
 transition: all .2s ease-in-out;
}
button {
 background: #079BCF;
 border: none;
 border-radius: 8px;
 color: #fff;
 cursor: pointer;
 font-family: 'Raleway', sans-serif;
 font-size: 27px;
 height: 72px;
 width: 100%;
 margin-bottom: 10px;
 overflow: hidden;
 transition: all .3s cubic-bezier(.6,0,.4,1);
}
button span {
 display: block;
 line-height: 72px;
 position: relative;
 top: -2px;
 transform: translate3d(0,0,0);
}
button:hover {
 background: #007BA5;
}

#arrow {
 height: 0;
 width: 0;
 border-bottom: 10px solid #fff;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 position: relative;
 left: 32px;
}


#hint {
 width: 100%;
 text-align: center;
 position: absolute;
 bottom: 20px;
}

[font=Tahoma, Arial, sans-serif]Thanks for reading the article, article from a source on the net[/font]

Code: (Select All)

Source: https://www.thuthuatweb.net/css/sign-in-up-form-transitions-cuc-cool-voi-css3.html

[Vuluts]

@huuthi95 Please provide the source link and credit the guide author.

Follow up question for the SIGN UP for this CSS, when an individual sign up and input their password, for security purposes I want to make the password to be MD5 when you check in database. Does CSS codes need to be edited or only on MySQL side?

[huuthi95]

@huuthi95 Please provide the source link and credit the guide author.

Follow up question for the SIGN UP for this CSS, when an individual sign up and input their password, for security purposes I want to make the password to be MD5 when you check in database. Does CSS codes need to be edited or only on MySQL side?

Thank you, I've noted the article source below the bottom of the page, If you want to customize according to needs, you customize the CSS, or you keep it and just modify MySQL

[rudra]

plaintext password or hash is bad. give a good read of this article to know more on this..

https://stackoverflow.com/questions/2345...on-via-get