<div class="o-grid p-layout">
  <div class="o-grid__item o-grid__header">
    <form>
      <label for="search">
        <input type="search" name="search" id="search" />
        <button class="c-btn c-btn--yellow">Search</button>
      </label>
    </form>
  </div>
  <div class="o-grid__item o-grid__main">
    <button class="c-btn c-btn--yellow c-btn--3d">3D button</button>
  </div>
  <div class="o-grid__item o-grid__sidebar">
    <a href="#" role="button" class="c-btn c-btn--yellow">Link button</a>
  </div>
  <div class="o-grid__item o-grid__footer">
    <a href="#" role="button" class="c-btn c-btn--large c-btn--blue">Contact</a>
  </div>
</div>
/* =Variables
--------------------------------*/
/* Colors */
$black: #000;
$white: #fff;
$grey: #d2d7df;
$yellow: #eca320;
$blue: #509cf6;

/* Font size */
$baseFontSize: 16;

/* =Functions
--------------------------------*/
@function rem($pixels) {
  @return $pixels / $baseFontSize * 1rem;
}

/* =Mixins
--------------------------------*/
@mixin button-3d($color) {
  box-shadow: 0px 4px darken($color, 20%);
}

/* =Elements style
--------------------------------*/
body {
  background: #22c1c3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #fdbb2d, #22c1c3);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #fdbb2d, #22c1c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* =Objects style
--------------------------------*/
.o-grid {
  display: grid;
  grid-gap: rem(10);
  grid-template-areas: "header header header"
                       "main main sidebar"
                       "footer footer footer";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 20% 1fr 20%;
}

.o-grid__item {
  background-color: $grey;
}

.o-grid__header {
  align-items: center;
  justify-content: flex-end;
  display: flex;
  grid-area: header;
  padding: 0 rem(20);
}

.o-grid__main {
  grid-area: main;
  padding: rem(50);
}

.o-grid__sidebar {
  grid-area: sidebar;
  padding: rem(20);
}

.o-grid__footer {
  align-items: center;
  display: flex;
  grid-area: footer;
  justify-content: flex-end;
  padding: rem(20);
}

/* =Components style
--------------------------------*/
/* Button */
.c-btn {
  background-color: transparent;
  border: 0;
  border-radius: rem(3);
  color: $black;
  padding: rem(5) rem(10);
  text-decoration: none;
}

.c-btn--large {
  font-size: rem(25);
}

.c-btn--3d {
  &.c-btn--yellow {
    @include button-3d($yellow);
  }
  
  &.c-btn--blue {
    @include button-3d($blue);
  }
}

.c-btn--yellow {
  background-color: $yellow;
}

.c-btn--blue {
  background-color: $blue;
  color: $white;
}

/* =Patterns style
--------------------------------*/
.p-layout {
  background-color: $white;
  height: calc(100vh - 100px);
  margin: rem(50) auto;
  width: 70%;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.