<div class="container">
  <div class="square shape">
    <span class="text">Square</span>
  </div>

  <div class="circle shape">
    <span class="text">Circle</span>
  </div>
</div>

@import "bourbon";
$bg-color: #011627;
$shape-color: #2EC4B6;
$shape-size: 120;

.shape {
    @include size($shape-size*1px);
    background: $shape-color;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    @include margin(25px);
    @include flex(0 0 auto);
    border: 0 solid transparent;
    transition: .3s;
    box-sizing: border-box;
    &:hover {
        border: 9px solid rgba(white,.3);
    }
    &:active {
        top: 1px;
    }
}
.circle {
    border-radius: 50%;
}

@function md-text-shadow ($n, $color) {
    $value: '0 0 0 transparent';
    @for $i from 1 through $n*2 {
        $value: '#{$value}, #{$i * .25}px #{$i * .25}px 0 ' + $color;
    }
    @return unquote($value);
}

.text {
    user-select: none;
    font-weight: 700;
    @include position(absolute, 50% null null 50%);
    @include transform(translate(-50%, -50%));
    font-size: 24px;
    text-align: center;
    line-height: 1;
    color: white;
    text-shadow: md-text-shadow($shape-size, darken($shape-color,5));
}


// Styling
html, body {
    @include size(100%);
}

body {
    background: $bg-color;
}

.container {
    @include size(100%);
    @include display(flex);
    @include align-items(center);
    @include justify-content(center);
    @include flex-wrap(wrap);
}