.top-notif

  h3 Top-Right Notification
    span(title='Close').close
  p A nice Material Design notification that tries to convince you to do something. In this case, following me on Codepen. 
  button.cta(type='button')
    a(href='https://codepen.io/koenigsegg1' target='_blank') Follow me
  button.ghost(type='button') No thanks
  
button.cta.show.hidden Show notification

$color: #4285F4;

*, :before, :after {
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #f2f2f2;
}

.hidden {
  visibility: hidden;
  opacity: 0;
}

.top-notif {
  background: #FFF;
  width: 500px;
  padding: 24px 24px 0 24px;
  color: #212121;
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(0,0,0, .24);
  position: absolute;
  top: 24px;
  right: 24px;
  transition: .3s;
  h3 {
    font: 1.1em Roboto;
    margin-bottom: 24px;
    span.close {
      float: right;
      height: 12px;
      width: 12px;
      margin: 3px;
      position: relative;
      cursor: pointer;
      &:before, &:after {
        content: '';
        background: #212121;
        width: 2px;
        height: 115%;
        position: absolute;
        left: 50%;
        transform: rotate(-45deg);
      }
      &:before {
        transform: rotate(45deg);
      }
    }
  }
  p {
    font: .85em/1.7em Roboto;
    margin-bottom: 24px;
  }
}

button {
  background: transparent;
  padding: 0 16px;
  margin: 0 0 16px 8px;
  border: none;
  border-radius: 2px;
  outline: none;
  text-transform: uppercase;
  font: 500 .9em/2.5 Roboto;
  white-space: nowrap;
  cursor: pointer;
  float: right;
  transition: .2s;
  &.cta {
    background: $color;
    color: #FFF;
    box-shadow: 0 0 2px rgba($color,.12), 0 2px 4px rgba(0,0,0,.24);
    &.show {
      margin: 0;
      float: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &:hover {
      background: darken($color, 5%);
      box-shadow: 0 0 4px rgba($color,.14), 0 4px 8px rgba(0,0,0,.28);
    }
  }
  &.ghost {
    color: #3367D6;
    color: $color;
    &:hover {
      background: rgba(153,153,153,.2);
    }
  }

  a {
    display: inline-block;
    width: calc(100% + 32px);
    color: inherit;
    text-decoration: none;
    transform: translateX(-16px);
  }
}

$('.close, .ghost, .cta:not(.show)').on('click', function () {
  $('.top-notif, .cta.show').toggleClass('hidden')
});

$('.cta.show').on('click', function () {
  $('.top-notif, .cta.show').toggleClass('hidden')
});