<div class="c-grid">
  <div class="c-grid-item item-01">
    <h1 class="c-title">Neumorphism</h1>
  </div>
  <button class="c-grid-item item-02 u-circle">
    <i class="far fa-circle"></i>
  </button>
  <button class="c-grid-item item-02 u-circle">
    <i class="fas fa-times"></i>
  </button>
  <button class="c-grid-item item-03">send</button>
  <button class="c-grid-item item-04">submit</button>
</div>
// variables
$font-amatic: 'Amatic SC', cursive;

// mixins
@mixin button_on {
  transition: box-shadow ease-in-out 0.5s;
  &:hover {
    box-shadow:
      -3px -3px 12px transparent,
      3px 3px 12px transparent,
      inset 3px 3px 12px rgba(17, 17, 17, 0.3),
      inset -3px -3px 12px rgba(255, 255, 255, 0.7)
    ;
  }
}

/**
 * ViewportScale v0.2.1
 * Copyright (c) 2018 Kite
 * MIT License
 */
@function strip-unit($value) {
	@return $value / ($value * 0 + 1);
}

@mixin vs($property, $min-vp, $min-length, $max-vp, $max-length, $vp-unit: "vw") {
	$u1: unit($min-vp);
	$u2: unit($min-length);
	$u3: unit($max-vp);
	$u4: unit($max-length);

	$a: strip-unit($min-vp);
	$b: strip-unit($min-length);
	$c: strip-unit($max-vp);
	$d: strip-unit($max-length);

	@if $u1 == $u3 and $u2 == $u4 {

		$x: ($d - $b) / ($c - $a) * 100#{$vp-unit};
		$y: ($c * $b - $a * $d) / ($c - $a) * 1#{$u2};

		#{$property}: $min-length;

		@media screen and (min-width: $min-vp) {
			@if $y == 0 {
				#{$property}: $x;
			} @else {
				#{$property}: calc(#{$x} + #{$y});
			}
		}

		@media screen and (min-width: $max-vp) {
			#{$property}: $max-length;
		}
	}
}

// reset
body {
  background-color: #edd2cb;
}
button {
  outline: 0;
  border: 0;
  cursor: pointer;
  @include button_on;
}

// style
.c-title {
  font-family: $font-amatic;
  background: linear-gradient(to right, rgba(216, 27, 96, 1), rgba(237, 107, 154, 1));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  overflow: hidden;
  letter-spacing: 0.4em;
  font-size: 14px;
  @media screen and ( min-width: 320px ) {
    @include vs(font-size, 320px, 14px, 600px, 48px);
  }
  @media screen and ( min-width: 600px ) {
    font-size: 48px;
  }
}
.c-grid {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  @media screen and ( min-width: 600px ) {
    grid-template-columns: repeat(4, 1fr);
  }
}
.c-grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 100%;
  height: 60px;
  margin-right: auto;
  margin-left: auto;
  color: #333;
  text-transform: uppercase;
  background-color: #edd2cb;
  box-shadow:
    -3px -3px 12px rgba(255, 255, 255, 0.7),
    3px 3px 12px rgba(17, 17, 17, 0.3),
    inset 3px 3px 12px transparent,
    inset -3px -3px 12px transparent
  ;
  
  &.item-01 {
    grid-column: 1 / 3;
    height: 200px;
    @media screen and ( min-width: 600px ) {
      grid-column: 1 / 5;
    }
  }
  
  &.item-02 {
    font-size: 16px;
  }
}
.u-circle {
  border-radius: 100px;
  width: 60px;
  height: 60px;
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.