Log In - Stylus

index.html

section.login-box
  header.login-header
    svg.login-icon(xmlns="http://www.w3.org/2000/svg", viewBox="0 0 612 612")
        path(d="M612 306.036C612 137.406 474.595 0 305.964 0S0 137.405 0 306.036c0 92.88 42.14 176.437 107.698 232.6.795.794 1.59 1.59 3.108 2.312C163.86 585.473 231.804 612 306.76 612c73.364 0 141.308-26.527 194.362-69.462 3.108-.795 5.493-3.108 7.01-5.493C571.453 480.088 612 398.122 612 306.035zm-583.883 0c0-153.018 124.9-277.92 277.92-277.92s277.918 124.902 277.918 277.92c0 74.955-29.635 142.826-78.063 192.845-7.806-36.718-31.225-99.168-103.072-139.717 16.408-20.31 25.732-46.838 25.732-74.955 0-67.15-54.644-121.793-121.793-121.793S184.965 217.06 184.965 284.208c0 28.117 10.12 53.85 25.732 74.955-72.497 40.55-95.916 103-102.928 139.718-49.223-49.222-79.653-117.89-79.653-192.844zM212.36 284.93c0-51.536 42.14-93.676 93.676-93.676s93.676 42.14 93.676 93.676-42.14 93.676-93.676 93.676-93.676-42.14-93.676-93.676zm-79.653 238.093c1.59-22.624 14.022-99.17 98.374-142.104 21.107 16.407 46.84 25.73 74.956 25.73 28.117 0 54.644-10.118 75.75-26.526 83.556 42.935 96.784 117.89 99.17 142.104-47.634 38.237-108.494 61.655-174.053 61.655-66.425.072-126.563-22.552-174.196-60.86z")/
    h1 Log In
      
    h2 Don't have an account? 
      a.login-sign(href="#sign") Sign up
  .login-content
    input.login-mail(type="mail",placeholder="E-mail Address")
    input.login-pass(type="password",placeholder="Password")
    a.login-forgot(href="#forgot") Forgot password?
    button.login-enter Log in    

Log In - Stylus.markdown

Log In - Stylus

A Pen by LucasLimay on CodePen.

License.

script.js

//@lucaslimay

style.css

cl-primary = #01B3EB
cl-secondary = #58B217
cl-third = #8996A4
html
body
  width 100%
  height 100%
body
  font-family 'Roboto', sans-serif
  background url("http://arttechnologypsyche.com/wp-content/uploads/2015/04/abstract-background.jpg") no-repeat center center fixed
  -webkit-background-size cover
  -moz-background-size cover
  -o-background-size cover
  background-size cover
  &:before
    content ""
    width 100%
    height 100%
    display block
    background rgba(#fff, 0)
    background-image linear-gradient(to top, rgba(#fff, 0), rgba(cl-secondary, .5))
    position absolute
.login-box
  position relative
  top 10%
  left 50%
  width 320px
  margin 0 auto
  margin-left -160px
  background rgba(#fff, .8)
  border-radius 12px
  box-shadow 0 0 20px rgba(#000, .15)
  overflow hidden
  transition .5s all
  &:hover
    transform scale(1.02)
    transition .5s all
    box-shadow 0 20px 80px rgba(#000, .3)
  *
    box-sizing border-box
.login-header
  background cl-primary
  background-image linear-gradient(to bottom, cl-primary - 10, rgba(cl-secondary + 60, .8))
  padding 30px
  text-align center
  color #fff
  text-shadow 0 2px 2px rgba(#000,.2)
  box-shadow inset 0 -1px rgba(#fff, .8), 0 4px rgba(#000, .06), inset 0 4px rgba(#fff, .2), inset 0 2px 2px rgba(#fff, .2)
  h1
    font-size 2em
    margin-bottom .5em
.login-icon
  width 50px
  fill #fff
  -webkit-filter drop-shadow(0 2px 2px rgba(#000,.2))
  filter drop-shadow(0 2px 2px rgba(#000,.2))
.login-sign
  text-decoration none
  color cl-secondary + 80
.login-content
  padding 20px
  input, button, a
    width 100%
    display inline-block
.login-mail
.login-pass
  margin-bottom 20px
  padding 10px
  color #999
  border 1px solid transparent
  border-radius 5px
  outline none
  transition .5s all
  &:hover
  &:focus
    transition .5s all
    box-shadow 0 2px rgba(#999, .2)
    border 1px solid rgba(#999, .4)
.login-forgot
  margin-bottom 20px
  text-align right
  text-decoration none
  color cl-third
  font-size .8em
  transition .2s all
  &:hover
    transition .2s all
    color cl-primary - 20    
.login-enter
  padding 14px
  text-transform uppercase
  border-radius 5px
  border none
  background cl-secondary + 30 
  color #fff
  outline none
  cursor pointer
  text-shadow 0 2px 1px rgba(#000,.2)
  transition .5s all
  &:hover
    background cl-secondary + 60
    background-image linear-gradient(to bottom, rgba(#fff,0), cl-secondary + 30)
    transform scale(1.04)
    transition .5s all
  &:active    
    background cl-secondary
    background-image linear-gradient(to top, rgba(#fff,0), cl-secondary - 20)
    transform scale(.98)
    transition .3s all

styles

<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />