A Code by alejandrokundrah

Open In Editor Publish Your Code

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

A Code by alejandrokundrah

Recommended

SVG Morphing animation

Animated Slider | Swiper JS

HTML CSS Developer Portfolio Website Template

HTML

CSS

JS

Recommended

SVG Morphing animation

Animated Slider | Swiper JS

HTML CSS Developer Portfolio Website Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS