<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:
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)
;
&.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
This Pen doesn't use any external JavaScript resources.