Un código de alejandrokundrah

Abrir en el editor Video Publica tu código

Recomendado

18 August 2023

<!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 código de alejandrokundrah

Recomendado

Código de botón brillante

Inicio de sesión simple

Un código de Metehan

HTML

CSS

JS

Recomendado

Código de botón brillante

Inicio de sesión simple

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS