<h1>Hover Me</h1>
html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  font-family: system-ui, sans-serif;
}

h1 {
  position: relative;
  padding:0.5em 1em;
  font-size: 5rem;
  cursor: pointer;
  background-color: #99ddff00;
  box-shadow:  0 1.25em inset #fff, 0 -1.25em inset #fff;
  transition: 0.3s;
  &::before {
    content: " ";
    display: block;
    position: absolute;
    border-radius: 50%;
    bottom: -1em;
    left: -1em;
    height: 1em;
    width: 1em;
    background: hsl(200 100% 80%);
    transform: translate(0, 0) scale(0, 0);
     box-shadow:  0 0em #99ddff, 0em -0em #99ddff;
  }
  &:hover {
    transition: box-shadow 0.4s 0.3s, background-color 0.5s;
    background-color: #99ddff;
    box-shadow:  0 0em inset #fff, 0 -0em inset #fff;
    &::before {
      box-shadow:  0.25em 0.25em #99ddff, -0.15em -0.35em #99ddff;
      bottom: calc(100% + 1.25em);
      left: calc(100% + 0.5em);
      height: 0em;
      width: 0em;
      transform: translate(0, 1em) scale(1, 1);
      transition-timing-function: linear;
      transition: transform 0.5s, bottom 0.9s 0.1s, left 1s, width 0.75s 0.25s,
        height 0.75s 0.25s,box-shadow 0.3s 0.6s;
    }
  }
}
View Compiled

External CSS

  1. https://gitcdn.xyz/repo/octoshrimpy/blokkfont/master/blokkfont.css

External JavaScript

This Pen doesn't use any external JavaScript resources.