CSS Buttons

Master CSS button styling to create beautiful, interactive buttons with hover effects, animations, and modern designs.

Buttons are one of the most important interactive elements on web pages. CSS provides powerful tools to style buttons that are both functional and visually appealing.

Basic Button Styling

.button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

Button States

.button {
  background-color: #007bff;
  color: white;
}

.button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.button:focus {
  outline: 3px solid rgba(0, 123, 255, 0.5);
  outline-offset: 2px;
}

.button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

Button Variants

Primary Button

.btn-primary {
  background-color: #007bff;
  color: white;
  border: none;
}

.btn-primary:hover {
  background-color: #0056b3;
}

Secondary Button

.btn-secondary {
  background-color: #6c757d;
  color: white;
  border: none;
}

.btn-secondary:hover {
  background-color: #545b62;
}

Outline Button

.btn-outline {
  background-color: transparent;
  color: #007bff;
  border: 2px solid #007bff;
}

.btn-outline:hover {
  background-color: #007bff;
  color: white;
}

Ghost Button

.btn-ghost {
  background-color: transparent;
  color: #333;
  border: 2px solid #333;
}

.btn-ghost:hover {
  background-color: #333;
  color: white;
}

Button Sizes

.btn-small {
  padding: 8px 16px;
  font-size: 14px;
}

.btn-medium {
  padding: 12px 24px;
  font-size: 16px;
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
}

.btn-block {
  display: block;
  width: 100%;
}

Gradient Buttons

.btn-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

Animated Buttons

Slide Background

.btn-slide {
  position: relative;
  background-color: #007bff;
  color: white;
  overflow: hidden;
  z-index: 1;
}

.btn-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #0056b3;
  transition: left 0.3s ease;
  z-index: -1;
}

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

Ripple Effect

.btn-ripple {
  position: relative;
  overflow: hidden;
}

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

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

Bounce Effect

.btn-bounce:hover {
  animation: bounce 0.5s;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

Icon Buttons

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

.btn-icon-only {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

Button Groups

.btn-group {
  display: inline-flex;
}

.btn-group .button {
  border-radius: 0;
  border-right: none;
}

.btn-group .button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.btn-group .button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 2px solid #007bff;
}

Loading State

.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

3D Buttons

.btn-3d {
  background-color: #007bff;
  color: white;
  border: none;
  box-shadow: 0 4px 0 #0056b3;
  transition: all 0.1s ease;
}

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

.btn-3d:active {
  box-shadow: 0 2px 0 #0056b3;
  transform: translateY(2px);
}

Rounded Buttons

.btn-rounded {
  border-radius: 50px;
}

.btn-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-facebook {
  background-color: #3b5998;
  color: white;
}

.btn-twitter {
  background-color: #1da1f2;
  color: white;
}

.btn-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
}

.btn-github {
  background-color: #333;
  color: white;
}

Glass Morphism Button

.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2);
}

Neon Button

.btn-neon {
  background-color: transparent;
  color: #00ff00;
  border: 2px solid #00ff00;
  text-shadow: 0 0 10px #00ff00;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

.btn-neon:hover {
  background-color: #00ff00;
  color: #000;
  text-shadow: none;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.6);
}

Best Practices

Button Best Practices

Use semantic HTML (<button> for actions, <a> for navigation)
Ensure minimum touch target size (44x44px for mobile)
Provide clear, descriptive button text
Include focus styles for keyboard navigation
Maintain sufficient color contrast (WCAG AA: 4.5:1)
Show loading state for async operations
Disable buttons during processing
Use consistent button styles across the site
Test buttons on different devices and screen sizes
Consider reduced motion preferences

Accessibility

/* Ensure keyboard focus is visible */
.button:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

/* Don't remove outline without alternative */
.button:focus:not(:focus-visible) {
  outline: none;
}

/* Disabled state should be clear */
.button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

Responsive Buttons

.button {
  padding: 12px 24px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .button {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  .btn-block-mobile {
    display: block;
    width: 100%;
  }
}

Master button styling to create engaging, accessible call-to-action elements!

Buttons are one of the most important interactive elements on web pages. CSS provides powerful tools to style buttons that are both functional and visually appealing.

Basic Button Styling

.button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

Button States

.button {
  background-color: #007bff;
  color: white;
}

.button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.button:focus {
  outline: 3px solid rgba(0, 123, 255, 0.5);
  outline-offset: 2px;
}

.button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

Button Variants

Primary Button

.btn-primary {
  background-color: #007bff;
  color: white;
  border: none;
}

.btn-primary:hover {
  background-color: #0056b3;
}

Secondary Button

.btn-secondary {
  background-color: #6c757d;
  color: white;
  border: none;
}

.btn-secondary:hover {
  background-color: #545b62;
}

Outline Button

.btn-outline {
  background-color: transparent;
  color: #007bff;
  border: 2px solid #007bff;
}

.btn-outline:hover {
  background-color: #007bff;
  color: white;
}

Ghost Button

.btn-ghost {
  background-color: transparent;
  color: #333;
  border: 2px solid #333;
}

.btn-ghost:hover {
  background-color: #333;
  color: white;
}

Button Sizes

.btn-small {
  padding: 8px 16px;
  font-size: 14px;
}

.btn-medium {
  padding: 12px 24px;
  font-size: 16px;
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
}

.btn-block {
  display: block;
  width: 100%;
}

Gradient Buttons

.btn-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
}

Animated Buttons

Slide Background

.btn-slide {
  position: relative;
  background-color: #007bff;
  color: white;
  overflow: hidden;
  z-index: 1;
}

.btn-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #0056b3;
  transition: left 0.3s ease;
  z-index: -1;
}

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

Ripple Effect

.btn-ripple {
  position: relative;
  overflow: hidden;
}

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

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

Bounce Effect

.btn-bounce:hover {
  animation: bounce 0.5s;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

Icon Buttons

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

.btn-icon-only {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

Button Groups

.btn-group {
  display: inline-flex;
}

.btn-group .button {
  border-radius: 0;
  border-right: none;
}

.btn-group .button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.btn-group .button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 2px solid #007bff;
}

Loading State

.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

3D Buttons

.btn-3d {
  background-color: #007bff;
  color: white;
  border: none;
  box-shadow: 0 4px 0 #0056b3;
  transition: all 0.1s ease;
}

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

.btn-3d:active {
  box-shadow: 0 2px 0 #0056b3;
  transform: translateY(2px);
}

Rounded Buttons

.btn-rounded {
  border-radius: 50px;
}

.btn-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-facebook {
  background-color: #3b5998;
  color: white;
}

.btn-twitter {
  background-color: #1da1f2;
  color: white;
}

.btn-instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
}

.btn-github {
  background-color: #333;
  color: white;
}

Glass Morphism Button

.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2);
}

Neon Button

.btn-neon {
  background-color: transparent;
  color: #00ff00;
  border: 2px solid #00ff00;
  text-shadow: 0 0 10px #00ff00;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

.btn-neon:hover {
  background-color: #00ff00;
  color: #000;
  text-shadow: none;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.6);
}

Best Practices

Button Best Practices

Use semantic HTML (<button> for actions, <a> for navigation)
Ensure minimum touch target size (44x44px for mobile)
Provide clear, descriptive button text
Include focus styles for keyboard navigation
Maintain sufficient color contrast (WCAG AA: 4.5:1)
Show loading state for async operations
Disable buttons during processing
Use consistent button styles across the site
Test buttons on different devices and screen sizes
Consider reduced motion preferences

Accessibility

/* Ensure keyboard focus is visible */
.button:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

/* Don't remove outline without alternative */
.button:focus:not(:focus-visible) {
  outline: none;
}

/* Disabled state should be clear */
.button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

Responsive Buttons

.button {
  padding: 12px 24px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .button {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  .btn-block-mobile {
    display: block;
    width: 100%;
  }
}

Master button styling to create engaging, accessible call-to-action elements!

CSS Buttons

On this page

CSS Buttons

On this page