Botões de rádio

832 AmirAliAkrami

Abrir no Editor Publique Seu Código

Recomendado

21 July 2025

Portfólio de desenvolvedores: Web, aplicativos, design - Dawid Wróbel

20 May 2025

Um Código de Skyrreum

23 November 2024

Página de destino - ImprovalAI

HTML

<aside>click Iran me!</aside>

CSS

button {
  position: relative;
  width: 100px;
  height: 100px;
  background-image: linear-gradient(
    120deg,
    #9b4eff,
    #c547ff,
    #97038f,
    #360135,
    #7d012a
  );
  background-position: top left;
  background-size: 100%;
  box-shadow:
    0px 0px 400px rgba(255, 59, 242, 1),
    0px 0px 200px rgba(255, 59, 242, 0.75),
    0px 0px 100px rgba(255, 59, 242, 0.5),
    0px 0px 50px rgba(255, 59, 242, 0.35),
    0px 0px 25px rgba(255, 59, 242, 0.2);
  border-radius: 100%;
  border: none;
  margin: 0;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  box-shadow:
    0px 0px 400px rgb(248, 247, 233),
    0px 0px 400px rgb(248, 247, 233),
    0px 0px 400px rgb(248, 247, 233),
    0px 0px 400px rgb(248, 247, 233),
    0px 0px 400px rgb(248, 247, 233);
  padding: 20px;
  background-size: 180%;
  transition: all 0.3s ease;
}

button:active {
  transform: scale(0.9);
  transition: all 0.05s ease;
}

button::before {
  position: absolute;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border: 1px solid rgba(255, 59, 242, 0.8);
  border-radius: 100%;
  pointer-events: none;
  content: "";
  transition: all 0.3s ease;
}

button:hover::before {
  border: 1px solid rgba(122, 255, 251, 0.6);
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  transition: all 0.3s ease;
}

button:active::before {
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  transition: all 0.07s ease;
}

button::after {
  position: absolute;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  border: 2px dashed rgba(255, 59, 242, 0.4);
  box-shadow: 0px 0px 100px rgba(122, 255, 251, 0.1);
  border-radius: 100%;
  pointer-events: none;
  animation: rotate 30s linear infinite;
  content: "";
  transition: all 0.3s ease;
}

@keyframes rotate {
  to {
    transform: rotateZ(-360deg);
  }
}

button:hover::after {
  border: 2px dashed rgba(122, 255, 251, 0.3);
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  transition: all 0.3s ease;
}

button:active::after {
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  transition: all 0.07s ease;
}

button > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: overlay;
  transition: all 0.3s ease;
  z-index: 1;
}

button i {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

button i svg {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0px 0px 5px white);
  mix-blend-mode: overlay;
}

button:hover i svg {
  animation: shake 0.5s linear infinite;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }

25% {
    transform: rotate(15deg);
  }

75% {
    transform: rotate(-15deg);
  }
}

button span {
  position: absolute;
  top: -7px;
  right: -11px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2;
}

button:hover span {
  background-color: #333;
  transition: all 0.3s ease;
}

button span p {
  font:
    normal normal 400 14pt / 2cap "Roboto Mono",
    monospace;
  color: #ccc;
  margin: 0;
  position: relative;
  left: 1px;
}

button span svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

aside {
  position: absolute;
  font:
    normal normal 900 14pt / 2cap "Architects Daughter",
    cursive;
  bottom: 10%;
  color: #777;
  transition: all 0.3s ease;
}

button:hover ~ aside {
  opacity: 0;
  transition: all 0.3s ease;
}

@media (max-height: 270px) {
  aside {
    display: none;
  }
}

Recomendado

Portfólio de desenvolvedores: Web, aplicativos, design - Dawid Wróbel

Um Código de Skyrreum

Página de destino - ImprovalAI

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS