Un code par alejandrokundrah

1,374 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 March 2025

Un code par danis

15 April 2026

une petite coupe du monde

26 February 2025

Un code par securearray494

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%;
  }
}

// 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);
  });
});