CSS-only sticker button with animated folding corner.
Demo: https://yepteam.github.io/sticker-button/
- Include Bootstrap 5 style file and compiled
sticker.cssfile inside<head>tag:
<head>
...
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet" href="dist/example.css">
...
</head>- Add class
btn-stickerto bootstrap button:
<button type="button" class="btn-sticker">Sticker Button</button>
<a href="#" class="btn-sticker">Sticker Button</a>You will find the complete list of variables in src/_variables.scss
// Default variable overrides
$sticker-line-height: 1;
$sticker-padding-y: .5rem;
$sticker-font-size: 1.25rem;
$sticker-border-width: 2px;
$sticker-corner-angle-default: 45deg;
@import "src/sticker.scss"
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}