CSS - buttons with custom colors

0 points
Created by:

In this article, we would like to show you how to create a button with custom color using CSS.

There are three main properties that you can use to color button elements:

  • color - to set the font color,
  • background - to set the background color,
  • border-color (border property third argument is border-color) - to set border color.

Practical example

In this example, we create three buttons with different colors using the properties mentioned above.

// ONLINE-RUNNER:browser;

<!doctype html>
    button {
      padding: 10px;
      margin: 3px;
    .button1 {
      color: white;
      background: red;
      border: 2px solid #b30000;
    .button2 {
      color: black;
      background: lightgray;
      border: 2px solid #adadad;
    .button3 {
      color: white;
      background: #2098d2;
      border: 2px solid #15668e;
  <button class="button1">Button1</button>
  <button class="button2">Button2</button>
  <button class="button3">Button3</button>
Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂