Un codice di alejandrokundrah

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

2 March 2025

Esempio di animazione di frammenti CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Brutalist Social Icons</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div class="container">
    <h1>BRUTALIST<br>SOCIAL ICONS</h1>
    
    <div class="social-container">
      <a href="#" class="social-btn twitter">
        <div class="btn-content">
          <i class="fab fa-twitter"></i>
          <span class="label">TWITTER</span>
        </div>
        <div class="btn-shadow"></div>
      </a>
      
      <a href="#" class="social-btn instagram">
        <div class="btn-content">
          <i class="fab fa-instagram"></i>
          <span class="label">INSTAGRAM</span>
        </div>
        <div class="btn-shadow"></div>
      </a>
      
      <a href="#" class="social-btn youtube">
        <div class="btn-content">
          <i class="fab fa-youtube"></i>
          <span class="label">YOUTUBE</span>
        </div>
        <div class="btn-shadow"></div>
      </a>
      
      <a href="#" class="social-btn tiktok">
        <div class="btn-content">
          <i class="fab fa-tiktok"></i>
          <span class="label">TIKTOK</span>
        </div>
        <div class="btn-shadow"></div>
      </a>
      
      <a href="#" class="social-btn github">
        <div class="btn-content">
          <i class="fab fa-github"></i>
          <span class="label">GITHUB</span>
        </div>
        <div class="btn-shadow"></div>
      </a>
      
      <a href="#" class="social-btn linkedin rotating">
        <div class="btn-content">
          <i class="fab fa-linkedin-in"></i>
          <span class="label">LINKEDIN</span>
        </div>
        <div class="btn-shadow"></div>
      </a>
    </div>
    
    <div class="glitch-container">
      <a href="#" class="social-btn discord glitch">
        <div class="btn-content">
          <i class="fab fa-discord"></i>
          <span class="label">DISCORD</span>
        </div>
        <div class="btn-shadow"></div>
      </a>
      
      <a href="#" class="social-btn pinterest noise">
        <div class="btn-content">
          <i class="fab fa-pinterest-p"></i>
          <span class="label">PINTEREST</span>
        </div>
        <div class="btn-shadow"></div>
      </a>
      
      <a href="#" class="social-btn reddit shake">
        <div class="btn-content">
          <i class="fab fa-reddit-alien"></i>
          <span class="label">REDDIT</span>
        </div>
        <div class="btn-shadow"></div>
      </a>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'Brutalist';
  src: url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap');
}

body {
  font-family: 'Space Mono', monospace;
  background-color: #f0f0f0;
  color: #000;
  padding: 40px 20px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: 
    linear-gradient(45deg, #ccc 25%, transparent 25%), 
    linear-gradient(-45deg, #ccc 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #ccc 75%), 
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

h1 {
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: -2px;
  line-height: 0.9;
  transform: scaleY(1.2);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}

.social-container, .glitch-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 30px;
}

.social-btn {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 0;
  transition: transform 0.2s, filter 0.3s;
  cursor: pointer;
}

.btn-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #fff;
  color: #000;
  padding: 15px 25px;
  border: 3px solid #000;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.2rem;
  min-width: 180px;
  transition: all 0.3s;
  z-index: 2;
}

.btn-shadow {
  position: absolute;
  top: 6px;
  left: 6px;
  right: -6px;
  bottom: -6px;
  background-color: #000;
  z-index: 1;
  transition: all 0.2s;
}

.social-btn:hover .btn-content {
  transform: translate(-4px, -4px);
}

.social-btn:active .btn-content {
  transform: translate(0, 0);
}

.social-btn i {
  font-size: 1.5rem;
}

/* Social button themes */
.twitter .btn-content {
  background-color: #1DA1F2;
  color: #fff;
}

.instagram .btn-content {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
}

.youtube .btn-content {
  background-color: #FF0000;
  color: #fff;
}

.tiktok .btn-content {
  background-color: #000;
  color: #fff;
  position: relative;
}

.tiktok .btn-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #25F4EE, #FE2C55);
  mix-blend-mode: overlay;
  opacity: 0.5;
  z-index: -1;
}

.github .btn-content {
  background-color: #333;
  color: #fff;
}

.linkedin .btn-content {
  background-color: #0077B5;
  color: #fff;
}

.discord .btn-content {
  background-color: #7289DA;
  color: #fff;
}

.pinterest .btn-content {
  background-color: #E60023;
  color: #fff;
}

.reddit .btn-content {
  background-color: #FF4500;
  color: #fff;
}

/* Special effects */
.glitch {
  position: relative;
  overflow: hidden;
}

.glitch::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 0;
  height: 100%;
  background-color: rgba(255,255,255,0.2);
  transform: skewX(-20deg);
  animation: glitch-sweep 3s infinite;
  z-index: 3;
}

@keyframes glitch-sweep {
  0% {
    left: -50px;
    width: 0;
  }
  10% {
    left: -10px;
    width: 10px;
  }
  20% {
    width: 0;
  }
  30% {
    width: 0;
  }
  40% {
    left: 100%;
    width: 30px;
  }
  100% {
    left: 100%;
    width: 30px;
  }
}

.noise::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAVZSURBVGhD7ZpZqFVVGMfPvZqaZmVRKUEPRQ9FD0UEEUE0PvVSREMzkAjRQ0UQTc+NED1EQzQrSdBLz9GsJAZlNBFNt3QbyMrcfr/F+g7nnH3OPuvuc+65Vxp/+LPWXutb37DXXmvvs29lCf8LHILzMAtzcBiWcCixAu9gHwbzBo7EEg4CJ+JzzCfgU5yCJQyRZTEfK2QxEftjGz7GGXgQpiHcYw4GmX2/BEtYCCfhS4ydPAYuQBRn4h/M1tnfT3A8ljALp+AbjJ16GW30fIe+hH+/xypYwjRcgq8wdug5nIsarsPYxt/PcB0OxRIGmI+xIx9hHG2uRtto9xMuxxIGsLYKvI6T0cblGNt/j2OwBEFPZOzAq+jw6fMobMR4jbwCy+EgcREmO/EiOuxSfBfG696FkzGPdH9YgsnO3Y+OHWssSavRNuVyuMgXfOhsHu2wD76Fv7EGnXCpceQb/IwPcD1OwLyT+BHsxA9o3Qo0cRjPxNvY3QOewHo0Tdjf0LZTMZnfa3EW+nwbp2I/zkaTYzTbhWQH7Gy6HbJYhXdRu0+wNzr/kqldr6O+PbAZ78Df8V6P4WpchRYW4VqM1/fiUtyMM7EOB+FCTLV/F7WhL8sj+BtexbztPjk08mqkc0TLWU5FH3RwDK1Gh9yynoJaPId+r8N76P1F7d5Ci/U4VJ6A19yN8boveg+XUXzRVGfOxiZchk5aH+5NmIcmV+NyNLkO4wRdpOlwS3E1ev0HZO67LG0a2QYVOPl9cMI9g0/RyWNHf0O/j6B1SsYR4CryGl8Wi4+i+d+hycaAk9l3x3qchPEFtLANn6E2r2G8v0utWsE2DkefMf11qRUn0+UYv4/hc/CZxSLFdiwAD0PqfBTfaGE+JjvgSPBdOhaFE2o/vo1+e93d6PcfuBmLZfF3HpZDipNQ/39oeDHGb/I4nBhFxmOB5biDyLVoR+dj8gUYiI9Qm7vQNnHUvos3UIvX0TWRQ+ckHMR2NB+HZDVq8wE6UZ/GvDiS1PnL0WMHNzWdHrLLh1hWsTGH0gto/gsYf4X68Tz4DmL+xXiyG12+fYPaXIcGEG9gk7X4N9p/is6bG9B3PodjmVhDHV/c5Fgn41P0+/vQZ78fQgNyLiaf3Xdo/Y1oWXwd2hVFpzzn4MPoG8uLQaRX0frzMDoQ46/gvcQ3ajCuOrXzc/ECuQ6ti/fkvfgeTsU65MXkzCvIy/fLJFOgKfKc5Mg51PyOSxdl6fMh4z3YgTLJFGiKzfgvRzegdfmfUzJ0Bt7DizhzGWSSOdAURVZeeTyJ1v+E/usRYhTJpEygKYosxcr4AK3vx63I+yzKIcscaIoiyy9l1W/GIit2JXMlk0yCpiiygpRF5GmkpbiBy42CbHMlk0yCpiiykidh+WSSpM5/gra1TuUimWSSWdAUZxV5wvoLo8DzSJtx3JUk05xJJpkFTbFQkXXoc/gLt6GrMJ9F3uCTSSX5/QxEFipyDbahnfdtk/d5FJFL0CbSZHoBTXIUmTwk9K6SHPITSZvkd/IQNf43R/sCL6BNk4dxyUPUiDKJrC7J7y9xEtokmcQl8j3lJTLFdnyB8fu7kck8ibzuMyy6K5lEnkXkCaRN5G8RdyXLI9IXpP7uwKLbJM8ibZ5H37BJHXAeFd3m9SPSbfwstihfRD64ktskcnW2DrO2SZYvIh9cyo1Iw59+nUVNsigT+eD6dSjSb84i0m/OSS5SJd8GV/RQZGUH1qK/ZqXfIv1+FOl/AlLnFipScvxJvwedR5H+epd+q7Yyf6+rjBxG+j/VEko4EKn8C/oOuMZi/zLsAAAAAElFTkSuQmCC');
  background-repeat: repeat;
  opacity: 0.1;
  mix-blend-mode: overlay;
  z-index: 3;
}

.shake:hover {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

.rotating .btn-content {
  transition: transform 0.4s;
}

.rotating:hover .btn-content {
  transform: rotate(3deg) translate(-4px, -4px);
}

/* Responsive styles */
@media (max-width: 768px) {
  h1 {
    font-size: 3rem;
  }
  
  .btn-content {
    padding: 12px 20px;
    font-size: 1rem;
    min-width: 160px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2.5rem;
  }
  
  .social-container {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-content {
    width: 100%;
  }
}

JS

// Random button movement
document.addEventListener('DOMContentLoaded', function() {
  const socialBtns = document.querySelectorAll('.social-btn');
  
  // Add hover sound effect
  socialBtns.forEach(btn => {
    btn.addEventListener('mouseenter', function() {
      // Create random movement on hover
      if (!this.classList.contains('glitch') && 
          !this.classList.contains('noise') && 
          !this.classList.contains('shake') && 
          !this.classList.contains('rotating')) {
        const randomX = Math.random() * 4 - 2;
        const randomY = Math.random() * 4 - 2;
        const randomRotate = Math.random() * 2 - 1;
        this.querySelector('.btn-content').style.transform = 
          `translate(${-4 + randomX}px, ${-4 + randomY}px) rotate(${randomRotate}deg)`;
      }
      
      // Create click sound
      const audio = new Audio();
      audio.volume = 0.2;
      audio.src = 'data:audio/mp3;base64,SUQzBAAAAAABEVRYWFgAAAAtAAADY29tbWVudABCaWdTb3VuZEJhbmsuY29tIC8gTGFzb25pY1N0dWRpb3MuY29tAFRYWFgAAAAhAAAFcGl0Y2gAcXVpY2sgYnV0dG9uIGNsaWNrIHNvdW5kAFRYWFgAAAASAAADdGltZQAwMDowMDowMC4wMDAAVFlFUgAAAAUAAP/TAFRJU1QAAAAdAAADY3JlYXRvcgBMYXNvbmljIFN0dWRpb3MAVFhYWAAAABoAAANkYXRlADIwMTktMDYtMjUgMTM6MTAAAFRDTwAAAAQAAP8=';
      audio.play();
    });
    
    btn.addEventListener('mouseleave', function() {
      if (!this.classList.contains('glitch') && 
          !this.classList.contains('noise') && 
          !this.classList.contains('shake') && 
          !this.classList.contains('rotating')) {
        this.querySelector('.btn-content').style.transform = '';
      }
    });
    
    btn.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Visual click effect
      this.querySelector('.btn-content').style.transform = 'translate(0, 0)';
      setTimeout(() => {
        this.querySelector('.btn-content').style.transform = '';
      }, 200);
      
      // Create click sound
      const audio = new Audio();
      audio.volume = 0.3;
      audio.src = 'data:audio/mp3;base64,SUQzBAAAAAABEVRYWFgAAAAtAAADY29tbWVudABCaWdTb3VuZEJhbmsuY29tIC8gTGFzb25pY1N0dWRpb3MuY29tAFRYWFgAAAAhAAAFcGl0Y2gAcXVpY2sgYnV0dG9uIGNsaWNrIHNvdW5kAFRYWFgAAAASAAADdGltZQAwMDowMDowMC4wMDAAVFlFUgAAAAUAAP/TAFRJU1QAAAAdAAADY3JlYXRvcgBMYXNvbmljIFN0dWRpb3MAVFhYWAAAABoAAANkYXRlADIwMTktMDYtMjUgMTM6MTAAAFRDTwAAAAQAAP8=';
      audio.play();
    });
  });
  
  // Create a brutalist cursor
  const cursor = document.createElement('div');
  cursor.style.position = 'fixed';
  cursor.style.width = '20px';
  cursor.style.height = '20px';
  cursor.style.border = '2px solid black';
  cursor.style.backgroundColor = 'white';
  cursor.style.transform = 'translate(-50%, -50%)';
  cursor.style.pointerEvents = 'none';
  cursor.style.zIndex = '9999';
  cursor.style.mixBlendMode = 'difference';
  document.body.appendChild(cursor);
  
  // Update cursor position
  document.addEventListener('mousemove', e => {
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
  });
  
  // Create a brutalist page entry effect
  document.body.style.opacity = '0';
  document.body.style.transition = 'opacity 0.5s ease-in-out';
  
  setTimeout(() => {
    document.body.style.opacity = '1';
  }, 100);
  
  // Random button positions on load
  socialBtns.forEach(btn => {
    const randomDelay = Math.random() * 0.5;
    btn.style.opacity = '0';
    btn.style.transform = 'translateY(20px)';
    btn.style.transition = `opacity 0.5s ease ${randomDelay}s, transform 0.5s ease ${randomDelay}s`;
    
    setTimeout(() => {
      btn.style.opacity = '1';
      btn.style.transform = 'translateY(0)';
    }, 100);
  });
});

Un codice di alejandrokundrah

Consigliato

Un codice del signor Paperino

Un codice di mcdonge13

Esempio di animazione di frammenti CSS

HTML

CSS

JS

Consigliato

Un codice del signor Paperino

Un codice di mcdonge13

Esempio di animazione di frammenti CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS