Skip to content

Instantly share code, notes, and snippets.

@kuc-arc-f

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

Last active May 21, 2021 11:07
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/b9f929c94c6c7361a70dbb335bc92df7 to your computer and use it in GitHub Desktop.
Save kuc-arc-f/b9f929c94c6c7361a70dbb335bc92df7 to your computer and use it in GitHub Desktop.
Download ZIP
bootstrap 5 button-outline custom
Raw
button-custom-3.html
<!-- bootstrap 5 button-outline 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-3.html</h1>
outline :<br />
<button class="btn btn-light btnx--outline-indigo">Button</button>
<button class="btn btn-light btnx-outline-purpule">Button</button>
<button class="btn btn-light btnx-outline-pink">Button</button>
<button class="btn btn-light btnx-outline-orange">Button</button>
<button class="btn btn-light btnx-outline-teal">Button</button>
<button class="btn btn-light btnx-outline-cyan">Button</button>
<button class="btn btn-light btnx-outline-lime">Button</button>
<hr />
<button class="btn btn-outline-primary">Button</button>
</div>
<style>
.btnx--outline-indigo{
color: var(--bs-indigo); background:var(--bs-white); border: 2px solid #9FA8DA;
}
.btnx-outline-purpule{
color: var(--bs-purple); background:var(--bs-white); border: 2px solid #CE93D8;
}
.btnx-outline-pink{
color: var(--bs-pink); background:var(--bs-white); border: 2px solid #F48FB1;
}
.btnx-outline-orange{
color: var(--bs-orange); background:var(--bs-white); border: 2px solid #FFCC80;
}
.btnx-outline-teal{
color: #004D40; background:var(--bs-white); border: 2px solid #80CBC4;
}
.btnx-outline-cyan{
color: #006064; background:var(--bs-white); border: 2px solid #80DEEA;
}
.btnx-outline-lime{
color: #827717; background:var(--bs-white); 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