Writing reusable CSS - Mini Project: Build & Apply

Writing Reusable CSS for a Button

📖 Scenario: You are creating a website with multiple buttons. Instead of writing the same styles for each button, you want to write reusable CSS classes to keep your code clean and easy to maintain.

🎯 Goal: Build a reusable CSS class called .btn that styles buttons with a blue background, white text, some padding, and rounded corners. Then create a secondary class called .btn-large that increases the padding and font size for bigger buttons.

📋 What You'll Learn

Create a CSS class named .btn with background color #007BFF, white text color, padding of 0.5rem 1rem, border radius of 0.25rem, and no border.

Create a CSS class named .btn-large that increases padding to 1rem 2rem and font size to 1.25rem.

Use semantic CSS properties and units like rem for scalability.

Ensure the CSS is reusable for multiple buttons by using classes.

💡 Why This Matters

🌍 Real World

Reusable CSS classes help keep website styles consistent and easy to update, especially when many buttons or components share the same look.

💼 Career

Writing reusable CSS is a key skill for front-end developers to create maintainable and scalable websites.

1

Create the base button class

Write a CSS class called .btn that sets background-color to #007BFF, color to #FFFFFF, padding to 0.5rem 1rem, border-radius to 0.25rem, and border to none.

CSS

/* Your code here */

Need a hint?

Use the .btn selector and set the properties exactly as described.

2

Add a large button modifier class

Add a CSS class called .btn-large that sets padding to 1rem 2rem and font-size to 1.25rem.

CSS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
}

/* Your code here */

Need a hint?

Define the .btn-large class below the .btn class with the specified properties.

3

Use the reusable classes in HTML

Write an HTML snippet with two <button> elements. The first button uses the class btn. The second button uses both classes btn and btn-large.

CSS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.25rem;
}

Need a hint?

Use the class attribute on <button> tags to apply the CSS classes.

4

Add hover effect to the button

Add a CSS rule for .btn:hover that changes the background-color to #0056b3 to create a hover effect.

CSS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.25rem;
}

/* Your code here */

Normal Button
Large Button

Need a hint?

Add a hover state by using the :hover pseudo-class on the .btn class.