Ein Code von alejandrokundrah

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

1 January 2025

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

Ein Code von alejandrokundrah

Empfohlen

Ein Code von Codex

Ein Code von Valcor27

CodePen Home Valentinstag

HTML

CSS

JS

Empfohlen

Ein Code von Codex

Ein Code von Valcor27

CodePen Home Valentinstag

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS