Skip to main content

Styling Textarea

Styling buttons is an essential aspect of web development, as buttons are one of the primary ways users interact with a web application.

Basic Styling​

Native Button Element​

You can apply basic styles directly to the <button> element to make it visually appealing and consistent with your application's design.

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

Button Variants​

You can create different button variants by using classes.

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

.button-secondary {
  background-color: #6c757d;
}

.button-success {
  background-color: #28a745;
}

Interactive States​

You can also style the button for different states like hover, focus, active, and disabled.

button:hover {
  background-color: #0056b3;
}

button:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

button:active {
  background-color: #004085;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Icon Buttons​

You can also include icons in buttons for better visual cues. You can use icon libraries like FontAwesome or SVGs.

<button class="button-icon">
  <i class="fa fa-play"></i> Play
</button>
.button-icon i {
  margin-right: 5px;
}

Accessibility​

  1. Labels: If the button's purpose is not clear from its content, use the aria-label attribute.
  2. ARIA Attributes: Use ARIA attributes like aria-pressed for toggle buttons.

Example HTML​

Here's how your HTML might look:

<button class="button-primary">Primary</button>
<button class="button-secondary">Secondary</button>
<button class="button-success">Success</button>

Complete Example​

Combining all the above, here's a complete example:

Select your gender

Select languages you can speak

Select your country




index.html
<html>
  <head>
      <link rel="stylesheet" type="text/css" href="./main.css" >
  </head>
  <body>
      <header></header>
      <form>
          <span>
              <label for="fName">First Name</label>
              <input id="fName" name="fName" pattern="[A-Za-z]{3,}" type="text" >
          </span>
          <div>
              <p> Select your gender</p>
              <span>
                  <input id="male" type="radio" name="gender" >
                  <label for="male">Male</label>
              </span>
              <span>
                  <input id="female" type="radio" name="gender" >
                  <label for="female">FeMale</label>
              </span>
          </div>
          <div>
              <p> Select languages you can speak</p>
              <span>
                  <input id="english" type="checkbox" name="languages" >
                  <label for="english">English</label>
              </span>
              <span>
                  <input id="spanish" type="checkbox" name="languages" >
                  <label for="spanish">Spanish</label>
              </span>
              <span>
                  <input id="hindi" type="checkbox" name="languages" >
                  <label for="hindi">Hindi</label>
              </span>
          </div>
          <div>
              <p> Select your country</p>
              <span>
                  <label for="country">Country:</label>
                  <select id="country">
                      <option>Australia</option>
                      <option>Finland</option>
                      <option>India</option>
                      <option>Spain</option>
                  </select>
              </span>
          </div>
          <br/>
          <div>
              <span>
                  <label for="address">Enter your full address</label><br/>
                  <textarea id="address" placeholder="Enter your full address"></textarea>
              </span>
          </div>
          <br/>
          <div>
              <button class="button-primary">Primary</button>
              <button class="button-secondary">Secondary</button>
              <button class="button-success">Success</button>
          </div>
        </form>
  </body>
</html>