YPqmmQ

index.haml

.instant-login{ data: { behavior: 'instant-login' } }
  %form{ url: '#' }
    %input{type: 'email', name: 'email', placeholder: 'E-Mail Adresse', class: 'instant-login--input', data: { behavior: 'instant-login-input' }, required: true}
    %button.instant-login--button{ data: { behavior: 'instant-login-button' } }
      .instant-login--icon
        %img{src: 'https://www.dropbox.com/s/tag8yui9et0hgjn/icon_instantlogin.png?raw=1'}
    .instant-login--text
      Instant Login via E-Mail
    .instant-login--success-text{ data: { behavior: 'instant-login-success' } }
      .instant-login--icon
        %img{src: 'https://www.dropbox.com/s/9moy1kvhdvs94ll/icon_check.png?raw=1'}
      You've got Mail

script.coffee

class InstantLogin
  constructor: ($el) ->
    @$el = $el
    @$input = $el.find('[data-behavior=instant-login-input]')
    @$button = $el.find('[data-behavior=instant-login-button]')
    @$success = $el.find('[data-behavior=instant-login-success]')
  init: ->
    @$el.click @handleClick
    @$button.click @handleSend
    @$success.click @handleSuccess

  handleClick: (event) =>
    @$el.addClass('as-open')
    @$input.focus()

  handleSend: (event) =>
    if @$input.is(':valid')
      @$input.removeClass('is-invalid')
      @$el.addClass('as-send')
      @$el.removeClass('as-open')
    else
      @$input.addClass('is-invalid')
      @$input.focus()
    false

  handleSuccess: (event) =>
    console.log @$el.prop('class')
    @$el.removeClass('as-send')
    @$el.removeClass('as-open')
    @$el.addClass('as-done')
    console.log @$el.prop('class')
    false

$ ->
  $('[data-behavior=instant-login]').each ->
    new InstantLogin($(@)).init()

style.sass

$light-color: #00BB8F
$dark-color: #00A078
$button-width: 400px
$button-height: 50px
$icon-size: 24px
$font-size: 18px
$padding: 10px
$margin: 20px

=translateX($pixel)
  transform: translateX($pixel)
  -webkit-transform: translateX($pixel)

=transition($value)
  transition: $value
  -webkit-transition: $value
 
div, button
  box-sizing: border-box
  border: none
    
.instant-login
  position: relative
  background: $light-color
  color: white
  padding: 3px
  overflow: hidden
  width: $button-width
  height: $button-height
  font-size: $font-size
  cursor: pointer
  .instant-login--input
    margin: 0
    height: $button-height - 6px
    width: 100%
    padding: $padding
    font-size: $font-size
    border: none
    +transition(all 0.3s ease-in-out)
    box-sizing: border-box
    &.is-invalid
      background: #fed7db
  .instant-login--text, .instant-login--button, .instant-login--success-text
    position: absolute
    top: 0
    left: 0
    height: 100%
    +transition(all 0.3s ease-in-out)
  .instant-login--icon
    position: absolute
    top: 0
    background: $dark-color
    margin-bottom: 0
    height: $button-height
    width: $button-height
    line-height: $button-height
    &:hover
      background: $light-color
    img
      width: $icon-size
      height: $icon-size
      padding-top: ($button-height - $icon-size) / 2
  .instant-login--button
    z-index: 2
    pointer-events: none
    outline: none
    padding: 0
    +translateX(0)
    
  .instant-login--text
    z-index: 1
    width: 100%
    padding-left: $button-height + $margin
    line-height: $button-height
    background: $light-color
    font-size: $font-size
  .instant-login--success-text
    z-index: 2
    width: 100%
    padding-left: $button-height + $margin
    background: $light-color
    +translateX(-$button-width)
    line-height: $button-height
    font-size: $font-size
    .instant-login--icon
      position: absolute
      left: 0
      img
        margin-left: ($button-height - $icon-size) / 2
  &.as-open, &:hover:not(.as-done)
    .instant-login--button
      +translateX($button-width - $button-height)
      pointer-events: auto
    .instant-login--text
      +translateX($button-width)
  &.as-send
    .instant-login--button
      +translateX($button-width)
    .instant-login--text
      +translateX($button-width)
    .instant-login--success-text
      +translateX(0px)
    .instant-login--input
      +translateX($button-width)

YPqmmQ.markdown

YPqmmQ

A Pen by Captain Anonymous on CodePen.

License.