ホーム > CSS > 【Top 10】Stylish Buttons You Can Use with Copy & Paste
CSS

【Top 10】Stylish Buttons You Can Use with Copy & Paste

Thank you for your continued support.
This article contains advertisements that help fund our operations.

Table Of Contents

  1. Gradient Hover Button
  2. Neon Effect Button
  3. 3D Push Button
  4. Glassmorphism Button
  5. Outline Expand Button
  6. Ripple Effect Button
  7. Slide Text Button
  8. Glow Effect Button
  9. Morphing Button
  10. Cyberpunk Button
  11. Usage Tips
  12. Summary

This time, we’re introducing 10 stylish button designs you can use on websites or applications. All buttons are implemented using only HTML and CSS, and can be used instantly with copy and paste.

PR

Gradient Hover Button

A button featuring a beautiful gradient and a floating effect on hover.

HTML

<button class="btn-gradient">CLICK ME</button>

CSS

.btn-gradient {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(102, 126, 234, 0.5);
}

Neon Effect Button

A button with a glowing neon effect reminiscent of a cyberpunk style.

HTML

<button class="btn-neon">NEON</button>

CSS

.btn-neon {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #00ff88;
  background: transparent;
  border: 2px solid #00ff88;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.btn-neon:hover {
  color: #000;
  background: #00ff88;
  box-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88, 0 0 60px #00ff88;
}

3D Push Button

A fun button with a 3D effect that appears to be pressed down when clicked.

HTML

<button class="btn-3d">PUSH ME</button>

CSS

.btn-3d {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: #e74c3c;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.1s ease;
  box-shadow: 0 5px 0 #c0392b;
}

.btn-3d:hover {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #c0392b;
}

.btn-3d:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 #c0392b;
}

Glassmorphism Button

A button featuring a modern design with a transparent, glass-like appearance.

HTML

<button class="btn-glass">GLASS</button>

CSS

.btn-glass {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

Outline Expand Button

A visually appealing button with a background that flows from left to right on hover.

HTML

<button class="btn-outline">HOVER ME</button>

CSS

.btn-outline {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #3498db;
  background: transparent;
  border: 2px solid #3498db;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #3498db;
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-outline:hover {
  color: white;
}

.btn-outline:hover::before {
  left: 0;
}

Ripple Effect Button

A striking button with a ripple effect that radiates from the center on hover.

HTML

<button class="btn-ripple">RIPPLE</button>

CSS

.btn-ripple {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: #9b59b6;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-ripple:hover::after {
  width: 300px;
  height: 300px;
}

Slide Text Button

A button featuring an animation where an arrow slides in, creating a dynamic effect.

HTML

<button class="btn-slide"><span>SLIDE</span></button>

CSS

.btn-slide {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: #2ecc71;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-slide span {
  position: relative;
  z-index: 1;
}

.btn-slide::before {
  content: "→";
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  font-size: 20px;
  transition: all 0.3s ease;
}

.btn-slide:hover::before {
  left: 85%;
}

Glow Effect Button

A button with a continuous glowing effect that makes it stand out.

HTML

<button class="btn-glow">GLOW</button>

CSS

.btn-glow {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: #ff6b6b;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.6);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 107, 107, 0.8);
  }
}

.btn-glow:hover {
  transform: scale(1.05);
}

Morphing Button

A fun button with a transform effect that changes shape on hover.

HTML

<button class="btn-morph">MORPH</button>

CSS

.btn-morph {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  background: #ffd93d;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-morph:hover {
  border-radius: 50px;
  transform: scale(1.1);
  background: #ffcd3c;
}

Cyberpunk Button

A button characterized by a futuristic design and hover effects.

HTML

<button class="btn-cyber">CYBER</button>

CSS

.btn-cyber {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  color: #0ff;
  background: #000;
  border: 2px solid #0ff;
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 2px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-cyber::before,
.btn-cyber::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: #0ff;
  transition: all 0.3s ease;
}

.btn-cyber::before {
  top: -2px;
  left: -2px;
}

.btn-cyber::after {
  bottom: -2px;
  right: -2px;
}

.btn-cyber:hover {
  color: #000;
  background: #0ff;
  box-shadow: 0 0 30px #0ff, inset 0 0 30px rgba(0, 255, 255, 0.3);
}

.btn-cyber:hover::before {
  width: 100%;
}

.btn-cyber:hover::after {
  width: 100%;
}

Usage Tips

  • Responsive: All buttons display beautifully on mobile devices.
  • Customizable: Colors, sizes, fonts, and more can be freely adjusted.
  • Accessibility: Designed with appropriate contrast and hover effects for ease of use.
  • Performance: Implemented using only CSS, so they do not affect page load speed.

Feel free to copy your favorite designs and customize them as you like!

Summary

All of these buttons are implemented using only HTML and CSS, with no need for JavaScript.

Each button features unique visual effects and can be used according to your specific needs.

Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!