CSS Tutorial

The language for styling web pages.

CSS Buttons

CSS can be used to style HTML buttons to be more visually appealing. You can change the background color, add hover effects, create different sizes, and add animations.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family:Arial; padding:25px; }
  button { padding:12px 25px; margin:6px; border:none; border-radius:8px; cursor:pointer; font-size:1em; font-weight:bold; transition:all 0.3s ease; }
  .solid    { background:#1572B6; color:white; }
  .solid:hover { background:#0d4f87; transform:translateY(-2px); box-shadow:0 5px 15px rgba(21,114,182,0.4); }
  .outline  { background:transparent; border:2px solid #1572B6; color:#1572B6; }
  .outline:hover { background:#1572B6; color:white; }
  .pill     { background:#28a745; color:white; border-radius:50px; }
  .pill:hover { background:#1e7e34; }
  .gradient { background:linear-gradient(135deg,#667eea,#764ba2); color:white; border-radius:25px; }
  .gradient:hover { opacity:0.9; transform:scale(1.05); }
  .icon     { background:#dc3545; color:white; border-radius:8px; }
  .icon:hover { background:#c82333; }
  .disabled { background:#ccc; color:#666; cursor:not-allowed; }
  .sm { padding:6px 12px; font-size:0.8em; background:#6f42c1; color:white; }
  .lg { padding:18px 40px; font-size:1.2em; background:#fd7e14; color:white; border-radius:12px; }
</style>
</head>
<body>
  <button class="solid">Solid Button</button>
  <button class="outline">Outline Button</button>
  <button class="pill">Pill Shape</button>
  <button class="gradient">Gradient Button</button>
  <br>
  <button class="icon">🗑️ Delete</button>
  <button class="disabled" disabled>Disabled</button>
  <button class="sm">Small</button>
  <button class="lg">Large Button</button>
</body>
</html>

Result

Take Chapter Quiz

Topics

CSS Introduction CSS Syntax CSS Selectors CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Box Model CSS Text CSS Fonts CSS Display CSS Position CSS Flexbox CSS Grid CSS Transitions CSS Animations CSS Media Queries CSS Variables CSS Gradients CSS Shadows CSS 2D Transforms CSS 3D Transforms CSS Pseudo-classes CSS Pseudo-elements CSS Float CSS Overflow CSS Z-index CSS Opacity CSS Buttons

CSS Tutorial

Course Topics

CSS Buttons

CSS Buttons

Try It Yourself

Topics