🩷styling collection

crayon utils

crayon utils provide users with tools to manipulate hex colors

please take note of the following parameter/argument syntax: .function("<class-name>", "<required input>")

function	example usage	description
.applyPastelColor()	.applyPastelColor(".card", "#4287f5")	converts a hex color to its pastel shade
.convertToPastel()	.convertToPastel("#4287f5")	calculates pastel color by mixing it with white

button animation classes

button styles preview

kindly view this codepen to see the button styles in action: https://codepen.io/carlosrrdev/pen/qBGpLYp?editors=1100

btn-lift

a lifting effect when button is hovered and slightly changes its background color

btn-shadow-lift

a lifting effect with a drop shadow

btn-slide-fill

a sliding fill effect from left to right when hovered

example usage

Below is an example usage of the croffle-css button classes. In this example, you can replace btn-shadow with the available button classes

import {btn-shadow} from "croffle-css"

<button class="btn-2">Click me!</button>
<div class="btn-shadow"></div>

cute font styles

croffle-css has an array of aesthetic font styles you can use in web design. You can easily use these fonts on your websites without downloading them simply by assigning your texts to a class.

List of available fonts:

• little book