clickmate

ClickMate

ClickMate is a lightweight CSS library that provides a variety of customizable button styles for use in web projects.

Getting Started

To use ClickMate, simply include the index.css file in your project's HTML file:

<link rel="stylesheet" href="path/to/index.css">

ClickMate includes the following button styles:

      .cm-btn-primary: #007BFF 
      .cm-btn-secondary: #6C757D 
      .cm-btn-success: #28A745 
      .cm-btn-danger: #DC3545 
      .cm-btn-warning: #FFC107 
      .cm-btn-info: #17A2B8 
      .cm-btn-light: #C7CBCE 
      .cm-btn-dark: #343A40
      .cm-btn-royal: #4B0082 
      .cm-btn-sunrise: #FFA726
      .cm-btn-mystic: #9C27B0 
      .cm-btn-ocean: #0097A7 
      .cm-btn-forest: #2E7D32 
      .cm-btn-sunset: #F4511E 
      .cm-btn-twilight: #3F51B5 
      .cm-btn-rosepetal: #E91E63 
      .cm-btn-sky: #2196F3 
      .cm-btn-limeade: #CDDC39 
      .cm-btn-sand: #BCAAA4 
      .cm-btn-moon: #FFCA28 
      .cm-btn-grape: #7B1FA2 
      .cm-btn-sienna: #8D6E63
      .cm-btn-navyblue: #1C2331 
      .cm-btn-olivegrove: #808000 
      .cm-btn-maroonwine: #800000 
      .cm-btn-steel: #4682B4  
      .cm-btn-saffron: #FF9933  
      .cm-btn-mint: #98FB98  
      .cm-btn-plum: #DDA0DD  
      .cm-btn-crimson: #DC143C
      .cm-btn-amber: #FFC107
      .cm-btn-aquamarine: #00FFFF
      .cm-btn-beige: #F5F5DC
      .cm-btn-bisque: #FFE4C4
      .cm-btn-cadetblue: #5F9EA0
      .cm-btn-coral: #FF7F50
      .cm-btn-cornflowerblue: #6495ED
      .cm-btn-crimsonred: #8B0000
      .cm-btn-dodgerblue: #1E90FF
      .cm-btn-forestgreen: #228B22
      .cm-btn-goldenrod: #DAA520
      .cm-btn-indigo: #4B0082
      .cm-btn-ivory: #FFFFF0
      .cm-btn-khaki: #F0E68C
      .cm-btn-lavender: #E6E6FA
      .cm-btn-lemonchiffon: #FFFACD
      .cm-btn-linen: #FAF0E6
      .cm-btn-magenta: #FF00FF
      .cm-btn-midnightblue: #191970
      .cm-btn-navajowhite: #FFDEAD
      .cm-btn-oldlace: #FDF5E6
      .cm-btn-palegreen: #98FB98
      .cm-btn-papayawhip: #FFEFD5
      .cm-btn-peru: #CD853F
      .cm-btn-powderblue: #B0E0E6
      .cm-btn-rosybrown: #BC8F8F
      .cm-btn-seashell: #FFF5EE
      .cm-btn-slateblue: #6A5ACD
      .cm-btn-teal: #008080
      .cm-btn-violet: #EE82EE 
      .cm-btn-aqua: #00FFFF
      .cm-btn-beige: #F5F5DC
      .cm-btn-bisque: #FFE4C4
      .cm-btn-blush: #DE5D83
      .cm-btn-coral: #FF7F50
      .cm-btn-cyan: #00FFFF
      .cm-btn-emerald: #50C878
      .cm-btn-fuchsia: #FF00FF
      .cm-btn-gold: #FFD700
      .cm-btn-ivory: #FFFFF0
      .cm-btn-khaki: #F0E68C
      .cm-btn-lavender: #E6E6FA
      .cm-btn-lilac: #C8A2C8
      .cm-btn-magenta: #FF00FF
      .cm-btn-mintcream: #F5FFFA
      .cm-btn-navajowhite: #FFDEAD
      .cm-btn-orchid: #DA70D6
      .cm-btn-peachpuff: #FFDAB9
      .cm-btn-peru: #CD853F
      .cm-btn-pink: #FFC0CB
      .cm-btn-pinkish: #f856f8
      .cm-btn-powderblue: #B0E0E6
      .cm-btn-pumpkin: #FF7518
      .cm-btn-rosybrown: #BC8F8F
      .cm-btn-royalblue: #4169E1
      .cm-btn-salmon: #FA8072
      .cm-btn-silver: #C0C0C0
      .cm-btn-slateblue: #6A5ACD
      .cm-btn-slategray: #708090
      .cm-btn-snow: #FFFAFA
      .cm-btn-tan: #D2B48C
      .cm-btn-teal: #008080
      .cm-btn-thistle: #D8BFD8
      .cm-btn-turquoise: #40E0D0
      .cm-btn-violet: #EE82EE
      .cm-btn-wheat: #F5DEB3
      .cm-btn-yellow: #FFFF00
      .cm-btn-oldlace: #FDF5E6
      .cm-btn-moccasin: #FFE4B5
      .cm-btn-lightpink: #FFB6C1

Customization

ClickMate is a lightweight and customizable CSS button library that you can use to quickly add stylish buttons to your website or web application.

In this version, you can choose from 5 different button sizes:

.cm-btn-tiny
.cm-btn-small
.cm-btn-medium
.cm-btn-large
.cm-btn-huge

You can also set the width of your buttons using the .cm-w-10-percent class or any of the other percentage classes (20, 30, 40, 50, 60, 70, 80, 90, or 100).

If you want to include icons in your buttons, you can use Font Awesome icons inside the button element. 
Here's an example of what a button with a Font Awesome icon might look like:

<button class="cm-btn-primary cm-btn-tiny">cm-btn-primary<i class="fa-solid fa-folder-open"></i></button>

When you hover over a button, the color of the font will always match the background color of the parent element. If the parent element does not have a background color, the font color will be white.

Customization

ClickMate includes a number of customization options that allow you to modify the size, color, and style of your buttons. To customize your buttons, simply modify the index.css file as needed.


Installation
To install ClickMate via npm, run the following command:

npm install clickmate

Or, if you are using yarn, run the following command:

yarn add clickmate

License
ClickMate is licensed under the MIT License.