Button

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" aria-hidden="true">
    <path d="M14.217,19.707l-1.112,2.547c-0.427,0.979-1.782,0.979-2.21,0l-1.112-2.547c-0.99-2.267-2.771-4.071-4.993-5.057L1.73,13.292c-0.973-0.432-0.973-1.848,0-2.28l2.965-1.316C6.974,8.684,8.787,6.813,9.76,4.47l1.126-2.714c0.418-1.007,1.81-1.007,2.228,0L14.24,4.47c0.973,2.344,2.786,4.215,5.065,5.226l2.965,1.316c0.973,0.432,0.973,1.848,0,2.28l-3.061,1.359C16.988,15.637,15.206,17.441,14.217,19.707z">
    </path>
    <path d="M24.481,27.796l-0.339,0.777c-0.248,0.569-1.036,0.569-1.284,0l-0.339-0.777c-0.604-1.385-1.693-2.488-3.051-3.092l-1.044-0.464c-0.565-0.251-0.565-1.072,0-1.323l0.986-0.438c1.393-0.619,2.501-1.763,3.095-3.195l0.348-0.84c0.243-0.585,1.052-0.585,1.294,0l0.348,0.84c0.594,1.432,1.702,2.576,3.095,3.195l0.986,0.438c0.565,0.251,0.565,1.072,0,1.323l-1.044,0.464C26.174,25.308,25.085,26.411,24.481,27.796z">
    </path>
  </svg>

<div id="liquid-metal">
    <div class="outline">
      <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M843.968 896a51.072 51.072 0 0 1-51.968-52.032V232H180.032A51.072 51.072 0 0 1 128 180.032c0-29.44 22.528-52.032 52.032-52.032h663.936c29.44 0 52.032 22.528 52.032 52.032v663.936c0 29.44-22.528 52.032-52.032 52.032z">
        </path>
        <path d="M180.032 896a49.92 49.92 0 0 1-36.48-15.616c-20.736-20.8-20.736-53.76 0-72.832L807.616 143.616c20.864-20.8 53.76-20.8 72.832 0 20.8 20.8 20.8 53.76 0 72.768L216.384 880.384a47.232 47.232 0 0 1-36.352 15.616z">
        </path>
      </svg>
    </div>
  </div>
</div>

CSS

:root {
  --bg-color: #1d1d1d;
  --light-color: #444;
  --dark-color: #000;
  --icon-color: #65615f;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  min-height: 100vh;
  font-size: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-color);
}

.text-box {
  position: absolute;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12rem;
  padding: 3rem;
  width: 65vw;
  background-color: var(--dark-color);
  border-radius: 0 50vh 50vh 0;
  box-shadow: inset 0 0.2em 0 0 var(--light-color);
}

.text-box > svg {
  flex-shrink: 0;
  width: 18rem;
  fill: var(--icon-color);
  transform: rotate(70deg);
}

.text-box > svg:last-of-type {
  transform: rotate(180deg);
}

#liquid-metal {
  position: relative;
  width: 38.5rem;
  height: 38.5rem;
  border-radius: 50%;
}

#liquid-metal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35rem;
  height: 35rem;
  background: linear-gradient(var(--light-color), var(--dark-color));
  border-radius: 50%;
  box-shadow: inset 0 0.2rem 0.2rem 0.2rem rgba(255, 255, 255, 0.3);
}

.outline {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 39rem;
  height: 39rem;
  border-radius: 50%;
  z-index: 1;
}

.outline::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.5rem;
  border-radius: inherit;
  background: conic-gradient(from 180deg, blue, purple, red, purple, blue);
  filter: grayscale(1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all 0.3s ease;
}

.outline:hover::before {
  padding: 0.5rem;
  filter: grayscale(0);
}

.outline .svg-icon {
  width: 10rem;
  fill: var(--icon-color);
  transform: rotate(-45deg);
}

JS

Recommended

Comments 0