Success Popup

index.haml

// Tried to mimic https://dribbble.com/shots/1523277-Success-Popup-for-Handybook-New-App-GIF

.b
.bb
%button#go
  GO
.message
  .check
    ✔
  %p
    Success
  %p
    Check your email for a booking confirmation. We'll see you soon!
  %button#ok
    OK

script.js

$('#go').click(function(){go(50)});
$('#ok').click(function(){go(500)});

setTimeout(function(){go(50)},700);
setTimeout(function(){go(500)},2000);

function go(nr) {
  $('.bb').fadeToggle(200);
  $('.message').toggleClass('comein');
  $('.check').toggleClass('scaledown');
  $('#go').fadeToggle(nr);
}

style.sass

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400)

$color: #71c341
$txtclr: #2c2928
 
body, html
  height: 100%
  font-size: 20px
  font-family: Source Sans Pro

.b, .bb
  position: absolute
  width: 100%
  height: 100%
  background: url('http://i.imgur.com/kje4L5j.jpg') 
    attachment: fixed
    size: cover
    position: center
.bb
  background: url('http://i.imgur.com/bDBs0et.jpg')
    attachment: fixed
    size: cover
    position: center
  display: none
  
    
#go
  position: absolute
  top: 30px
  left: 50%
  transform: translate(-50%, 0%)
  color: white
  border: 0
  background: $color
  width: 100px
  height: 30px
  border-radius: 6px
  font-size: 1rem
  transition: background 0.2s ease
  outline: none
  &:hover
    background: lighten($color, 10)
  &:active
    background: darken($color, 10)
      
.message
  position: absolute
  top: -200px
  left: 50%
  transform: translate(-50%, 0%)
  width: 300px
  background: white
  border-radius: 8px
  padding: 30px
  text-align: center
  font-weight: 300
  color: $txtclr
  opacity: 0
  transition: top 0.3s cubic-bezier(.31,.25,.50,1.50), opacity 0.2s ease-in-out
  & .check
    position: absolute
    top: 0
    left: 50%
    transform: translate(-50%, -50%) scale(4)
    width: 120px
    height: 110px
    background: $color
    color: white
    font-size: 3.8rem
    padding-top: 10px
    border-radius: 50%
    opacity: 0
    transition: transform 0.2s 0.25s cubic-bezier(.31,.25,.50,1.50), opacity 0.1s 0.25s ease-in-out
  & .scaledown
    transform: translate(-50%, -50%) scale(1)
    opacity: 1
    
  & p
    font-size: 1.1rem
    margin: 25px 0px
    padding: 0
  & p:nth-child(2)
    font-size: 2.3rem
    margin: 40px 0px 0px 0px
  & #ok
    position: relative
    color: white
    border: 0
    background: $color
    width: 100%
    height: 50px
    border-radius: 6px
    font-size: 1.2rem
    transition: background 0.2s ease
    outline: none
    &:hover
      background: lighten($color, 10)
    &:active
      background: darken($color, 10)
.comein
  top: 150px
  opacity: 1

Success-Popup.markdown

Success Popup

Tried to mimic https://dribbble.com/shots/1523277-Success-Popup-for-Handybook-New-App-GIF

A Pen by Andreas Gillström on CodePen.

License.