Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
bootstrap 5 button custom
<!-- bootstrap 5 button custom -->
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=""
rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<link rel="stylesheet" href="" />
<title>Hello, world!</title>
<body style="background : var(--bs-light);">
<div class="container bg-white p-4" >
<h1>bootstrap 5 / button-custom-2.html</h1>
<hr />
<button class="btn btn-secondary btnx-indigo">Button</button>
<button class="btn btn-secondary btnx-purpule">Button</button>
<button class="btn btn-secondary btnx-pink">Button</button>
<button class="btn btn-secondary btnx-orange">Button</button>
<button class="btn btn-secondary btnx-teal">Button</button>
<button class="btn btn-secondary btnx-cyan">Button</button>
<button class="btn btn-secondary btnx-lime">Button</button>
<hr />
Light :<br />
<button class="btn btn-light btnx-indigo-light">Button</button>
<button class="btn btn-light btnx-purpule-light">Button</button>
<button class="btn btn-light btnx-pink-light">Button</button>
<button class="btn btn-light btnx-orange-light">Button</button>
<button class="btn btn-light btnx-teal-light">Button</button>
<button class="btn btn-light btnx-cyan-light">Button</button>
<button class="btn btn-light btnx-lime-light">Button</button>
<hr />
background: var(--bs-indigo); border: 2px solid var(--bs-indigo);
background: var(--bs-purple); border: 2px solid var(--bs-purple);
background: var(--bs-pink); border: 2px solid var(--bs-pink);
background: var(--bs-orange); border: 2px solid var(--bs-orange);
background: var(--bs-teal); border: 2px solid var(--bs-teal);
background: var(--bs-cyan); border: 2px solid var(--bs-cyan);
background: #7CB342; border: 2px solid #7CB342;
color: var(--bs-indigo) ;background: #9FA8DA; border: 2px solid #9FA8DA;
color: var(--bs-purple); background: #CE93D8; border: 2px solid #CE93D8;
color: var(--bs-pink);background: #F48FB1; border: 2px solid #F48FB1;
color: var(--bs-orange) ;background: #FFCC80; border: 2px solid #FFCC80;
color: #004D40;background: #80CBC4; border: 2px solid #80CBC4;
color: #006064;background: #80DEEA; border: 2px solid #80DEEA;
color: #827717 ;background: #C5E1A5; border: 2px solid #C5E1A5;
<script src=""
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment