<div class="container">
<form class="form-style" action="" method="post">
<div class="header">
<div class="example-icon" >ICON</div>
<small>Neque porro quisquam est qui dolorem ipsum</small>
</div>
<hr>
<div class="content">
<label for="inp" class="inp">
<input type="text" id="inp" placeholder=" ">
<span class="label">Username</span>
<span class="border"></span>
</label>
<label for="inp" class="inp">
<input type="password" id="inp" placeholder=" ">
<span class="label">Password</span>
<span class="border"></span>
</label>
</div>
<hr>
<div class="footer">
<input type="submit" name="submit" value="Login" class="bton login" />
<input type="submit" name="submit" value="Register" class="bton register" />
</div>
</form>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
body {
background: #00c3ff; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1c1d22, #00c3ff, #6060dc); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1c1d22, #00c3ff, #6060dc); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Roboto', sans-serif;
}
/** Form Style **/
.form-style hr {
border-color: #383838;
}
.container {
position: relative;
width: 450px;
margin: 70px auto;
animation: myanim 2.3s;
}
.form-style {
background: #212121;
border-radius: 5px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,.33);
}
.form-style .header{
color: white;
text-align: center;
margin-bottom: 25px;
}
.form-style .header small{
color: dimgrey;
}
.content {
text-align: center;
display: grid;
margin-bottom: 50px;
}
.example-icon {
font-size: 2.4rem;
font-weight: 900;
color: #00c3ff;
}
.footer {
padding:20px;
text-align: center;
}
/** Button Style **/
.bton {
cursor: pointer;
padding: 10px 35px;
background: gray;
border: 1px solid black;
border-radius: 5px;
font-weight: 900;
color: white;
transition: all 0.6s;
}
.bton:hover {
background: #00c3ff;
}
.bton.login {
background: #6060dc;
}
.bton.register {
background: #3a3a3a;
}
/** INPUT Style **/
.inp
position: relative
margin: auto
margin-top:25px
width: 100%
max-width: 280px
//transform: rotateX(45deg) rotateY(-10deg) rotate(25deg) scale(2)
.label
position: absolute
top: 16px
left: 0
font-size: 16px
color: #9098A9
font-weight: 500
transform-origin: 0 0
transition: all .2s ease
.border
position: absolute
bottom: 0
left: 0
height: 2px
width: 100%
background #6060dc
transform: scaleX(0)
transform-origin: 0 0
transition: all .15s ease
input
-webkit-appearance: none
width: 100%
border: 0
font-family: inherit
padding: 0
height: 48px
font-size: 16px
font-weight: 500
border-bottom: 2px solid #C8CCD4
background: none
border-radius: 0
color: #223254
transition: all .15s ease
&:hover
background: rgba(#223254,.03)
&:not(:placeholder-shown)
+ span
color #5A667F
transform: translateY(-26px) scale(.75)
&:focus
background: none
outline: none
+ span
color #6060dc
transform: translateY(-26px) scale(.75)
+ .border
transform: scaleX(1)
@keyframes myanim {
0% {
opacity: 0;
top: -35px;
}
100% {
top: 0px;
opacity: 1;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.