Add Animated Folding Corners To Bootstrap Buttons – Sticker.css

Sticker.css is a CSS extension for the Bootstrap framework that adds interactive, animated, folded corners to Bootstrap button components. You can customize the corner angles, sizes, colors, and animation behaviors.

The CSS extension enhances standard Bootstrap buttons by introducing folding corners that mimic the look of a sticker peeling off. It can be used for call-to-action buttons, promotional offers, or any clickable element that needs a bit of visual flair.

How to use it:

1. Download the package and load the ‘sticker.css’ stylesheet in the document.

<link rel="stylesheet" href="dist/sticker.css">

2. To apply the sticker effect, add the ‘btn-sticker’ class to your Bootstrap buttons. Here’s a simple example:

<button type="button" class="btn btn-sticker">Sticker Button</button>

3. Use the ‘.btn-sticker-corner-border-inherit’ class if you want the corner to mimic the border style of the button itself.

<button type="button" class="btn btn-sticker btn-sticker-corner-border-inherit">Sticker Button</button>

4. For a darker corner background, include the ‘btn-sticker-corner-dark’ class:

<button type="button" class="btn btn-sticker btn-sticker-corner-border-inherit btn-sticker-corner-dark">Sticker Button</button>

5. To extend the corner background to match the button’s border color, use ‘.btn-sticker-corner-border-inherit-fill’. Perfect for Bootstrap outline buttons.

<button type="button" class="btn btn-sticker btn-sticker-corner-border-inherit-fill">Sticker Button</button>

6. Adjust the size of the folding corner: ‘btn-lg’ for large or ‘btn-sm’ for small.

<button type="button" class="btn btn-lg btn-sticker btn-sticker-lg">Large button</button>
<button type="button" class="btn btn-sm btn-sticker btn-sticker-sm">Small button</button>

7. Use the ‘btn-sticker-corner-hover’ class to display the folded corners only on hover.

<button type="button" class="btnbtn-sticker btn-sticker-corner-hover>Hover Me</button>

8. To keep the corner effect static, apply the ‘btn-sticker-corner-static’ class. This disables the interaction and keeps the corner visible at all times.

<button type="button" class="btnbtn-sticker btn-sticker-corner-static>Static Button</button>

9. Customize the angle of the folding corner by modifying the ‘$sticker-corner-angle-variants’ variable in the ‘_variables.scss’ file.

$sticker-corner-angle-variants: (0, 15, 30, 45, 135, 150, 165, 180, 195, 210, 225, 315, 330, 345);

10. Sticker Button includes several CSS variables that you can adjust to match your project’s design. Modify these in the ‘_variables.scss’ file and recompile the CSS.

// Bootstrap 5 default height-related .btn values
$sticker-line-height: 1.5 !default;
$sticker-padding-y: .375rem !default;
$sticker-font-size: 1rem !default;
$sticker-border-width: 1px !default;

// Bootstrap 5 default height-related .btn-lg values
$sticker-lg-line-height: 1.5 !default;
$sticker-lg-padding-y: .5rem !default;
$sticker-lg-font-size: 1.25rem !default;
$sticker-lg-border-width: 1px !default;

// Bootstrap 5 default height-related .btn-sm values
$sticker-sm-line-height: 1.5 !default;
$sticker-sm-padding-y: .25rem !default;
$sticker-sm-font-size: .875rem !default;
$sticker-sm-border-width: 1px !default;

// Sticker corner settings
$sticker-corner-angle-default: 30deg !default;
$sticker-corner-size: 0.25 !default;

$sticker-corner-angle-variants: (
0, 15, 30, 45, 135, 150, 165, 180, 195, 210, 225, 315, 330, 345
) !default;

// Sticker corner default style
$sticker-corner-bg-color: rgba(255, 255, 255, .5) !default;
$sticker-corner-border: 1px solid #fff !default;;

// Sticker corner dark style
$sticker-corner-dark-bg-color: rgba(0, 0, 0, .5) !default;
$sticker-corner-dark-border: 1px solid #000 !default;

$sticker-transition-time: 0.3s !default;
$sticker-transition-function: ease-out !default;

$sticker-shadow: 0 1rem .5rem rgba(0, 0, 0, .25) !default;

The post Add Animated Folding Corners To Bootstrap Buttons – Sticker.css appeared first on CSS Script.