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

अनुशंसित

31 January 2025

वेब डिज़ाइन, डिजिटल अनुभव और पॉडकास्ट HTML टेम्पलेट

HTML

CSS

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

अनुशंसित

बटन ईरानी

UNO कार्ड HTML CSS उदाहरण

वेब डिज़ाइन, डिजिटल अनुभव और पॉडकास्ट HTML टेम्पलेट

HTML

CSS

JS

अनुशंसित

बटन ईरानी

UNO कार्ड HTML CSS उदाहरण

वेब डिज़ाइन, डिजिटल अनुभव और पॉडकास्ट HTML टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS