Simple Helpful Icon Mockup

index.jade

input.message(placeholder='How can we help?')
.container
  .tear
    | <span> <i class="fa fa-life-ring"></i></span>

script.coffeescript

open = true
$('.tear').click -> 
  if open
    $('.tear').addClass('active')
    $('.message').addClass('active')
    $('.tear').html("<span><i class='fa fa-close'></i></span>")
    open = !open
  else
    $('.tear').removeClass('active green')
    $('.message').removeClass('active')
    $('.message').val('')
    $('.tear').html("<span><i class='fa fa-life-ring'></i></span>")
    open = !open



$('input').on 'input', (e)-> 
  value = $("input").val()
  if value.length >= 2
    $('.tear').addClass('green')
    $('.tear').removeClass('active')
    $('.tear').html("<span><i class='fa fa-check'></i></span>")
  else
    $('.tear').removeClass('green')
    $('.tear').addClass('active')
    $('.tear').html("<span><i class='fa fa-close'></i></span>")
  

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="http://www.greensock.com/js/src/utils/SplitText.min.js"></script>

Simple Helpful Icon Mockup.markdown

Simple Helpful Icon Mockup

A Pen by Matthew Greenberg on CodePen.

License.

style.sass

@import bourbon
@import neat

$black: black
$white: white
$gray: #9b9b9b

html, body
  font-family: Montserrat
  width: 100%
  margin: 0
  padding: 0
  background: #F5F7F8
.message
  width: 0em
  position: absolute
  left: 50%
  border: 0
  border-radius: 50px
  +transform(translateX(-50%))
  margin-top: 4em
  background: white
  box-shadow: 0px 0px 0px shade(#F5F7F8, 20%)
  font-size: 1.5em
  padding: 1em
  color: #333
  opacity: 0
  +transition(0.5s)
  @media(max-width: 650px)
    width: 0em
    font-size: 1em
    margin-top: 8em
  &:focus
    outline: none
  &.active
    opacity: 1
    +transition(1s)
    width: 20em
    box-shadow: 3px 3px 10px shade(#F5F7F8, 20%)

    

.container
  display: flex
  align-items: center
  justify-content: center
  height: 100vh
  min-height: 650px
  .tear 
    width: 10em
    height: 10em
    border-radius: 0 50% 50% 50%
    border-radius: 50%
    cursor: pointer
    // border: 6px solid black
    transform: rotate(0deg)
    +transition(0.3s)
    background: dodgerblue
    box-shadow: 4px 4px 10px shade(white, 30%)
    position: relative
   
    &.active
      border-radius: 0 50% 50% 50%
      transform: rotate(45deg)
      background: black
      span
        position: absolute
        left: 38%
        top: 30%
        // +transform(translateX(-50%) translateY(-50%))
        font-size: 3em
        color: white
        +transform(rotate(45deg))
    &.green
      background: green
      transform: rotate(0deg)
      border-radius: 5px
  span
    position: absolute
    left: 50%
    top: 50%
    +transform(translateX(-50%) translateY(-50%))
    font-size: 3em
    color: white
    

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Pacifico|Sue+Ellen+Francisco|Lobster|Montserrat" rel="stylesheet" />