<div class="container">
  <div class="row one">
    <div class="column one">
      <div class="text set1">
        <h2>OBSERVE</h2>
        <h2 style="letter-spacing: 7px">OPPOSE</h2>
        <h2>UPSCALE</h2>
        <h2>UPSCALE</h2>
        <h2>UPSCALE</h2>
        <h2>UPSCALE</h2>
      </div>
      
      <div class="text set2">
        <h2>OBSERVE</h2>
        <h2 style="letter-spacing: 7px">OPPOSE</h2>
        <h2>UPSCALE</h2>
        <h2>UPSCALE</h2>
        <h2>UPSCALE</h2>
        <h2>UPSCALE</h2>
      </div>
      
      <div class="text set3">
        <h2>OBSERVE</h2>
        <h2 style="letter-spacing: 7px">OPPOSE</h2>
        <h2>UPSCALE</h2>
        <h2>UPSCALE</h2>
        <h2>UPSCALE</h2>
        <h2>UPSCALE</h2>
      </div>
    </div>
    <div class="column two">
      <div class="rects set1">
        <div class="rect one"></div>
        <div class="rect two"></div>
        <div class="rect three"></div>
        <div class="rect four"></div>
        <div class="rect five"></div>
        <div class="rect six"></div>
      </div>
      
      <div class="rects set2">
        <div class="rect one"></div>
        <div class="rect two"></div>
        <div class="rect three"></div>
        <div class="rect four"></div>
        <div class="rect five"></div>
        <div class="rect six"></div>
      </div>
      
      <div class="rects set3">
        <div class="rect one"></div>
        <div class="rect two"></div>
        <div class="rect three"></div>
        <div class="rect four"></div>
        <div class="rect five"></div>
        <div class="rect six"></div>
      </div>
    </div>
  </div>
  <div class="row two">
    <a href="https://twitter.com/juxtopposed" class="column one" target="_blank">
      <div class="button set1">CONNECT</div>
      <div class="button set2">CONNECT</div>
      <div class="button set3">CONNECT</div>
    </a>
    <a href="https://dribbble.com/shots/21293580-Daily-Design-Code-6-Retro-Glitch-Effect-Colors-RGB" target="_blank" class="column two">
      <div class="button set1">VIEW DESIGN</div>
      <div class="button set2">VIEW DESIGN</div>
      <div class="button set3">VIEW DESIGN</div>
    </a>
  </div>
  
  
  
  <div class="border">
    <div class="border set1"></div>
    <div class="border set2"></div>
    <div class="border set3"></div>
  </div>
</div>
:root {
  --red: #FF0000;
  --green: #00FF00;
  --blue: #0000FF;
  --black: #000000;
}


body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  
  margin: 5em auto;
  height: 100vh;
  
  font-family: 'Inter';
  background-color: var(--black);
  
}

body > * {
  filter: blur(4px);
  
}

.container {
  display: flex;
  flex-direction: column;
  width: 840px;
  height: 800px;
  gap: 2em;
  position: relative;
  padding: 3em;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-direction: row;
  position: relative;
  gap: 2em;
}

.column {
  display: flex;
  flex-direction: column;
  position: relative;
}

.row.one {
  height: 80%;
  width: 100%
}

.row.two {
  height: 20%;
  width: 100%;
}

.column.one {
  width: 40%;
}

.column.two {
  width: 60%;
}


/* text */
h2 {
  font-size: 60px;
  margin: 0;
}

a {
  font-size: 45px;
  text-decoration: none;
  color: inherit;
  z-index: 5;
  
}

a > * {
  display: flex;
  height: 100%;
  justify-content: center !important;
  align-items: center;
}

.text.set1 {
  color: var(--red);
}

.text.set2 {
  color: var(--green);
}

.text.set3 {
  color: var(--blue);
}


.set1 {
  position: absolute;
  mix-blend-mode: screen;
  transform: translate(4px, 4px);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  box-sizing: border-box;
  
  animation: set1 1s infinite;
}

.set2 {
  position: absolute;
  mix-blend-mode: screen;
  transform: translate(0,0);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  box-sizing: border-box;
  
  animation: set2 1s infinite;
}

.set3 {
  position: absolute;
  mix-blend-mode: screen;
  transform: translate(-4px, -4px);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  box-sizing: border-box;
  
  animation: set3 1s infinite;
}




.rects.set1, .rects.set2, .rects.set3 {
  padding: 0.5em;
}

.rects.set1 > * {
  background-color: var(--red);
}

.rects.set2 > * {
  background-color: var(--green);
}

.rects.set3 > * {
  background-color: var(--blue);
}



.rect {
  width: 100%;
  position: relative;
}

.rect.one {
  height: 2%;
}

.rect.two {
  height: 4%;
}

.rect.three {
  height: 7%;
}

.rect.four {
  height: 10%;
}

.rect.five {
  height: 15%;
}

.rect.six {
  height: 30%;
}


.border {
  top: 0;
  left: 0;
}

.border.set1 {
  border: 12px solid var(--red);
}

.border.set2 {
  border: 12px solid var(--green);
}

.border.set3 {
  border: 12px solid var(--blue);
}

.button {
  width: 100%;
}


.button.set1 {
  color: var(--red);
  border: 12px solid var(--red);
}

.button.set2 {
  color: var(--green);
  border: 12px solid var(--green);
}

.button.set3 {
  color: var(--blue);
  border: 12px solid var(--blue);
}



@keyframes set1 {
  0% {transform: translate(4px, 4px)}
  15% {transform: translate(5px, 6px)}
  30% {transform: translate(4px, 4px)}
  45% {transform: translate(5px, 6px)}
  60% {transform: translate(4px, 4px)}
  75% {transform: translate(6px, -2px)}
  100% {transform: translate(4px, 4px)}
}

@keyframes set2 {
  0% {transform: translate(0px, 0px)}
  15% {transform: translate(-1px, -2px)}
  30% {transform: translate(0px, 0px)}
  45% {transform: translate(-1px, -2px)}
  60% {transform: translate(0px, 0px)}
  75% {transform: translate(-1px, 1px)}
  100% {transform: translate(0px, 0px)}
}

@keyframes set3 {
  0% {transform: translate(-4px, -4px)}
  15% {transform: translate(-6px, -6px)}
  30% {transform: translate(-4px, -4px)}
  45% {transform: translate(0px, 0px)}
  60% {transform: translate(-4px, -4px)}
  75% {transform: translate(-3px, -5px)}
  100% {transform: translate(-4px, -4px)}
}

a:hover > .set1 {
  animation: none;
  transform: translate(0,0);
}

a:hover > .set2 {
  animation: none;
  transform: translate(0,0);
}

a:hover > .set3 {
  animation: none;
  transform: translate(0,0);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.