Botón

786 0 alejandrokundrah Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

23 August 2025

Plantilla HTML de página de inicio de sesión en turco

28 August 2025

Instalación de paneles solares | Servicios y precios

7 May 2026

Incrustar juegos gratuitos: Ejemplo HTML de LuminSDK

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);
}

Comments 0

…