CSS Animated Button & Layer

Open In Editor Publish Your Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #18202C;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .function       { color: #A6E22E; }
.animation-container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background:transparent;
}

.button {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #8c8c8c; /* Cor de fundo */
  position: relative;
  animation: buttonLoop 1s linear infinite;
}

@keyframes buttonLoop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.layer1 { /*  A primeira camada: um clique e a sombra se movem */
  width: 200px;
  height: 200px;
  background-color: rgba(255,255,255,0.1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: layerPulse 1s ease-in-out infinite;
}

@keyframes layerPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255,255,255,0.8);
  }
  100% { 
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
  }
}

CSS Animated Button & Layer

Recommended

CSS Loading Bar Animation

Animated HTML and CSS Input

CSS Animated Button Hover Effect

HTML

CSS

JS

Recommended

CSS Loading Bar Animation

Animated HTML and CSS Input

CSS Animated Button Hover Effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS