<div class="wrapper">
  <button class="button button--big">Clicky</button>
</div>

@mixin linear-gradient($deg, $color1, $color1-perc, $color2, $color2-perc) {
  background: -webkit-linear-gradient($deg, $color1 $color1-perc, $color2 $color2-perc); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient($deg, $color1 $color1-perc, $color2 $color2-perc); /* FF3.6+ */
  background:     -ms-linear-gradient($deg, $color1 $color1-perc, $color2 $color2-perc); /* IE10 */
  background:      -o-linear-gradient($deg, $color1 $color1-perc, $color2 $color2-perc); /* Opera 11.10+ */
  background:         linear-gradient($deg, $color1 $color1-perc, $color2 $color2-perc); /* W3C */
}

body {
  background: #FFDFB6;
  @include linear-gradient(90deg, #f46b45, 10%, #FFEDBC, 90%);
}

.wrapper {
  width: 250px;
  margin: 150px auto;
}

.button {
  border: none;
  background: none;
  position:relative;
  display:inline-block;
  margin-bottom:0;
  padding:12px 32px;
  padding: 25px 86px; //big button
  height:auto;
  width:auto;
  font-size:1rem;
  font-size: 4rem;
  font-family:"Sofia Pro", sans-serif;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  vertical-align:middle;
  cursor:pointer;
  color:#e48080;
  background-color:#fff;
  background-image:none;
  border:0 none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
  
  &.button--big{
    padding:25px 86px;
    font-size:1.5625rem
  }
  
  &:after {
    position:absolute;
    top:100%;
    left:0;
    z-index:-1;
    display:block;
    content:'';
    height:22px;
    width:100%;  
    background: url('http://www.kikk.be/2015/files/templates/kikk2015/public/assets/images/floating-card-shadow.png') no-repeat;
    background-size:100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
  }
  
  &:hover, &:focus{
    color:#fff;
    background-color:#e48080;
    text-decoration:none;
    outline:none
  }
}

/**
*  Just an okay looking button.
*  ajv 2015
*  www.andreasvirkus.me
*/