ficogs wrapper

by Amens

HTML

<div id="app">
  <button type="submit"><span>Validate the payment</span></button>
  <a href="google.pl" class="button"><span>test</span></a>
  <button class="button-decorated-border" type="submit"><span>Validate the payment</span></button>
  <a href="google.pl" class="button button-decorated-border"><span>test</span></a>
</div>

SCSS

$primary-color: #333;
$primary-text-color: #EEE;
$secondary-color: #444;

$primary-font-size: 14px;

$primary-font: sans-serif;

$primary-padding: 20px;

$decoration-offset: 20px;

#app {
  display: grid;
}

button, .button {
  background: $primary-color;
  color: $primary-text-color;
  border: 0; // extend .default-reset?
  padding: 0; // extend .default-reset?
  text-decoration: none;
  text-align: center; 
  box-sizing: border-box; // extend .default-reset?
  font-size: $primary-font-size;
  font-family: $primary-font;
  
  span {
    display: block;
    padding: $primary-padding;
  }
  
  &.button-decorated-border {
    margin: $decoration-offset;
    position: relative;
    z-index: 3;
    &:before {
      content: '';
      z-index: -1;
      background: red;
      position:absolute;
      padding: $decoration-offset/2;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
  }
}