CSS एनिमेटेड बटन और परत

अनुशंसित

20 September 2025

सीएसएस एनिमेटेड आतिशबाज़ी, जुगनू, सूरजमुखी

20 August 2024

* {
  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 एनिमेटेड बटन और परत

अनुशंसित

सीएसएस एनिमेटेड आतिशबाज़ी, जुगनू, सूरजमुखी

एनिमेटेड और 3D साइट गैलरी

एनिमेटेड HTML और CSS इनपुट

HTML

CSS

JS

अनुशंसित

सीएसएस एनिमेटेड आतिशबाज़ी, जुगनू, सूरजमुखी

एनिमेटेड और 3D साइट गैलरी

एनिमेटेड HTML और CSS इनपुट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS