? Buttons in CSS

Styling buttons in CSS lets you create visually appealing, interactive elements for user actions like clicks, submits, etc.

Basic Button Styling

button {  background-color: #007bff;  color: white;  border: none;  padding: 10px 20px;  font-size: 16px;  cursor: pointer;  border-radius: 4px;  transition: background-color 0.3s ease;}

Common Button States

Use pseudo-classes to style different states:

button:hover {  background-color: #0056b3; /* Darker on hover */}button:active {  background-color: #004080; /* When clicked */}button:focus {  outline: 2px solid #0056b3; /* Focus outline */  outline-offset: 2px;}

Disabled Button

button:disabled {  background-color: #cccccc;  color: #666666;  cursor: not-allowed;}

Styling Different Button Types

Rounded button

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

Outline button

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

Adding Icons Inside Buttons

Using inline SVG or font icons (like FontAwesome):

<button>  <span class="icon">?</span> Like</button>

button .icon {  margin-right: 8px;}

Example: Animated Button

button {  background-color: #28a745;  border: none;  padding: 12px 24px;  color: white;  font-weight: bold;  cursor: pointer;  border-radius: 6px;  transition: transform 0.2s ease;}button:hover {  transform: scale(1.05);}

Want me to help you build a custom button style or share ready-to-use button UI code snippets?