Morphing Button

A modern button that morphs into different shapes with smooth transitions

CSS Effects

Font Awesome Included: This snippet uses Font Awesome icons. The required stylesheet is automatically included at the top of the code block. If you are going to use this snippet in your project, add the stylesheet to your <head>.

Code

HTML

<!-- Font Awesome Icons; Make sure to add it in the <head> tag -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
<button class="morphing-button">
  <span>Hover Me</span>
  <i class="fas fa-arrow-right"></i>
</button>

CSS

.morphing-button {
  position: relative;
  padding: 12px 24px;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.morphing-button:hover {
  transform: translateY(-2px);
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(106, 17, 203, 0.3);
}

.morphing-button:hover i {
  transform: translateX(4px);
}

.morphing-button i {
  transition: transform 0.3s ease;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .morphing-button {
    background: linear-gradient(135deg, #8a3eff, #3a7bd5);
  }
  
  .morphing-button:hover {
    box-shadow: 0 5px 15px rgba(138, 62, 255, 0.3);
  }
}

Morphing Button

Live Preview

Code