About this snippet

Create stunning 3D social media buttons. We use pure CSS isometric transforms, so you get an amazing hover effect which looks completely modern.

Size
2.0 KB
Uses
HTML, CSS
Loads
Nothing external
Views
147

Collections

Related snippets

<div class="iso-container">
  <div class="iso-item">
    <div class="iso-layer"></div>
    <div class="iso-layer"></div>
    <div class="iso-layer"></div>
    <div class="iso-layer"></div>
    <div class="iso-layer main-layer">
      <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
      </svg>
    </div>
  </div>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #f3f4f6;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.iso-container {
  display: flex;
  gap: 40px;
}

.iso-item {
  position: relative;
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.iso-item:hover {
  transform: rotateX(60deg) rotateZ(-45deg) translateZ(20px);
}

.iso-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3b82f6;
}

.iso-item:hover .iso-layer:nth-child(5) { 
  transform: translateZ(40px); 
  box-shadow: -20px 20px 20px rgba(0, 0, 0, 0.1); 
}

.iso-item:hover .iso-layer:nth-child(4) { 
  transform: translateZ(30px); 
  opacity: 0.8; 
}

.iso-item:hover .iso-layer:nth-child(3) { 
  transform: translateZ(20px); 
  opacity: 0.6; 
}

.iso-item:hover .iso-layer:nth-child(2) { 
  transform: translateZ(10px); 
  opacity: 0.4; 
}

.iso-item:hover .iso-layer:nth-child(1) { 
  transform: translateZ(0px); 
  opacity: 0.2; 
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save