Skip to content

Instantly share code, notes, and snippets.

@kuc-arc-f

kuc-arc-f/button-custom-pub.html

Last active May 20, 2021 23:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kuc-arc-f/fea053e0e96e9017467e80a55eaebdfd to your computer and use it in GitHub Desktop.
Save kuc-arc-f/fea053e0e96e9017467e80a55eaebdfd to your computer and use it in GitHub Desktop.
Download ZIP
bootstrap 5 button custom
Raw
button-custom-pub.html
<!-- bootstrap 5 button custom -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />
<title>Hello, world!</title>
</head>
<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 />
</div>
<style>
.btnx-indigo{
background: var(--bs-indigo); border: 2px solid var(--bs-indigo);
}
.btnx-purpule{
background: var(--bs-purple); border: 2px solid var(--bs-purple);
}
.btnx-pink{
background: var(--bs-pink); border: 2px solid var(--bs-pink);
}
.btnx-orange{
background: var(--bs-orange); border: 2px solid var(--bs-orange);
}
.btnx-teal{
background: var(--bs-teal); border: 2px solid var(--bs-teal);
}
.btnx-cyan{
background: var(--bs-cyan); border: 2px solid var(--bs-cyan);
}
.btnx-lime{
background: #7CB342; border: 2px solid #7CB342;
}
.btnx-indigo-light{
color: var(--bs-indigo) ;background: #9FA8DA; border: 2px solid #9FA8DA;
}
.btnx-purpule-light{
color: var(--bs-purple); background: #CE93D8; border: 2px solid #CE93D8;
}
.btnx-pink-light{
color: var(--bs-pink);background: #F48FB1; border: 2px solid #F48FB1;
}
.btnx-orange-light{
color: var(--bs-orange) ;background: #FFCC80; border: 2px solid #FFCC80;
}
.btnx-teal-light{
color: #004D40;background: #80CBC4; border: 2px solid #80CBC4;
}
.btnx-cyan-light{
color: #006064;background: #80DEEA; border: 2px solid #80DEEA;
}
.btnx-lime-light{
color: #827717 ;background: #C5E1A5; border: 2px solid #C5E1A5;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment