CSS Default Buttons

Last Updated:

Default CSS Buttons are a type of button created using HTML and CSS. They provide a quick and easy way to add basic styling to any web page or application. The buttons can be styled to look like a traditional button or they can have a custom style applied to them. They can also be used to trigger certain events or functions when clicked.

Sample CSS buttons

<button class="default-button-1">
  Button text
</button>

<button class="default-button-2">
  Button text
</button>
/* Default Button 2 */
.default-button-1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.5rem;
  border: 2px solid #6366f1;
  background-color: #6366f1;
  color: white;
  padding: 12px 40px;
  border-radius: 6px;
  text-decoration: none;
  transition: color 0.2s ease 0s, background-color 0.2s ease 0s,
  border 0.2s ease 0s;
}
.default-button-1:hover,
.default-button-1:active,
.default-button-1:focus {
  background-color: transparent;
  color: #6366f1;
}

/* Default Button 2 */
.default-button-2 {
  padding: 12px 40px;
  border-radius: 6px;
  color: white;
  font-size: 1rem;
  transition: color 0.2s ease 0s, background-color 0.4s ease 0s,
  box-shadow 0.2s ease 0s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1.5rem;
  background-color: #6366f1;
  border: 0px transparent;
}
.default-button-2:hover {
  background-color: rgba(99, 102, 241, 0.9);
}
.default-button-2:focus {
  background-color: rgba(99, 102, 241, 0.9);
  box-shadow: 0px 0px 0px 3px #6366f1;
}
/* Default Button 1 */
.default-button-1 {
    padding: 12px 40px;
    border-radius: 6px;
    color: white;
    font-size: 1rem;
    transition: color 0.2s ease 0s, background-color 0.4s ease 0s, box-shadow 0.2s ease 0s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1.5rem;
    background-color: #6366f1;
    border: 0px transparent;
    &:hover {
        background-color: rgba(99, 102, 241, 0.9);
    }
    &:focus {
        background-color: rgba(99, 102, 241, 0.9);
        box-shadow: 0px 0px 0px 3px #6366f1;
    }
}
/* Default Button 2 */
.default-button-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1.5rem;
    border: 2px solid #6366f1;
    background-color: #6366f1;
    color: white;
    padding: 12px 40px;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.2s ease 0s, background-color 0.2s ease 0s, border 0.2s ease 0s;
    &:hover {
        background-color: transparent;
        color: #6366f1;
    }
    &:active {
        background-color: transparent;
        color: #6366f1;
    }
    &:focus {
        background-color: transparent;
        color: #6366f1;
    }
}

Round buttons HTML CSS

<button class="round-button-1">
  Button text
</button>

<button class="round-button-2">
  Button text
</button>
/* Round Button 1 */
.round-button-1 {
  padding: 12px 40px;
  border-radius: 25rem;
  color: white;
  font-size: 1rem;
  background-color: #6366f1;
  border: 2px solid #6366f1;
  transition: color 0.2s ease 0s, background-color 0.2s ease 0s,
    border 0.2s ease 0s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.round-button-1:hover,
.round-button-1:active,
.round-button-1:focus {
  background-color: transparent;
  color: #6366f1;
}
/* Round Button 2 */
.round-button-2 {
  padding: 12px 40px;
  border-radius: 25rem;
  color: white;
  font-size: 1rem;
  background-color: #6366f1;
  border: 0;
  transition: color 0.2s ease 0s, background-color 0.2s ease 0s,
    border 0.2s ease 0s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.round-button-2:hover {
  background-color: rgba(99, 102, 241, 0.9);
}
.round-button-2:focus {
  background-color: rgba(99, 102, 241, 0.9);
  box-shadow: 0px 0px 0px 2px #6366f1;
}
/* Round Button 1 */
.round-button-1 {
    padding: 12px 40px;
    border-radius: 25rem;
    color: white;
    font-size: 1rem;
    background-color: #6366f1;
    border: 2px solid #6366f1;
    transition: color 0.2s ease 0s, background-color 0.2s ease 0s, border 0.2s ease 0s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    &:hover {
        background-color: transparent;
        color: #6366f1;
    }
    &:active {
        background-color: transparent;
        color: #6366f1;
    }
    &:focus {
        background-color: transparent;
        color: #6366f1;
    }
}
/* Round Button 2 */
.round-button-2 {
    padding: 12px 40px;
    border-radius: 25rem;
    color: white;
    font-size: 1rem;
    background-color: #6366f1;
    border: 0;
    transition: color 0.2s ease 0s, background-color 0.2s ease 0s, border 0.2s ease 0s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    &:hover {
        background-color: rgba(99, 102, 241, 0.9);
    }
    &:focus {
        background-color: rgba(99, 102, 241, 0.9);
        box-shadow: 0px 0px 0px 2px #6366f1;
    }
}