⚡DihokButtons

A collection of 46 modern button components built entirely with Pure CSS.
DihokButtons is a lightweight, zero-dependency CSS button library designed to save you hours of styling time. Whether you're building a quick prototype or a production-grade web application, these buttons offer a professional, modern look right out of the box.

✨ Features

• 46 unique button designs
• Built with Pure CSS
• No JavaScript required
• No frameworks or libraries
• Easy to customize
• Modern hover and transition effects
• Ready to use

📸 Preview

💠First Part of Buttons

💠Second Part of Buttons

💠Third Part of Buttons

📦 Installation

Clone the repository:

bash
git clone https://github.com/SirwanCode/dihokbuttons.git

Or download the ZIP file, and then include the CSS DihokButtons.css in your project.

<link rel="stylesheet" href="css/DihokButtons.css">

📖 Usage

✳ sample usage(for button-003)

<button class="dButton-003 dButton-003-red">Button</button>

➰to change color, just replace class "dButton-003-blue" with one the following
    🔷 dButton-003-green
    🔷 dButton-003-red
    🔷 dButton-003-violet
    🔷 dButton-003-orange

✳ sample usage(for button-044)

<button class="dButton-044 dButton-044-blue">
     <span class="icon">&#128386;</span>
     <span class="text">  Button </span>
</button>

➰to change color, just replace class "dButton-044-blue" with one the following
    🔷 dButton-044-green
    🔷 dButton-044-red
    🔷 dButton-044-violet
    🔷 dButton-044-orange
➰to change direction of button, replace "dButton-044" with "dButton-044-rtl"

📌📌📌 Open index.html and we have listed all buttons and how to add each one📌📌📌

🎨 Customization

You can easily customize:

• Colors
• Fonts
• Border radius
• Padding
• Shadows
• Hover effects
• Animations
• Transition speed

🔶 just open DihokButtons.css and find the button and change properties
💢 to add new Color set:
      ◼ Open DihokButtons.css
      ◼ in :root, add new color with differrent brightness

 /* green in HSL */
 --btn-green:#099268;
--hue-green:165;
--sat-green:80%;
--btn-green-900: hsl(var(--hue-green), var(--sat-green), var(--light-900));
--btn-green-700: hsl(var(--hue-green), var(--sat-green), var(--light-700));
--btn-green-600: hsl(var(--hue-green), var(--sat-green), var(--light-600));
--btn-green-500: hsl(var(--hue-green), var(--sat-green), var(--light-500));
--btn-green-450: hsl(var(--hue-green), var(--sat-green), var(--light-450));
--btn-green-300: hsl(var(--hue-green), var(--sat-green), var(--light-300));
--btn-green-100: hsl(var(--hue-green), var(--sat-green), var(--light-100));
--btn-green-093: hsl(var(--hue-green),  var(--sat-light), var(--light-093));

📁 Project Structure

DihokButtons/
├── css/
│   │   └── DihokButtons.css
├── preview/
│   │   └── dihokButtons-001.png
│   │   └── dihokButtons-002.png
│   │   └── dihokButtons-003.png
├── index.html
├── README.md
 

💻 Built With

• HTML5
• CSS3

🎯 Purpose

I built this to have a go-to set of buttons that look great without relying on heavy frameworks like Bootstrap or Tailwind. It's perfect for portfolio sites, dashboards, or any side project where you want clean UI without the bloat.

🤝 Contributing

Contributions are welcome!

If you'd like to improve DihokButtons or add new button styles:

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Open a Pull Request

⭐ Support

If you like this project, consider giving it a star on GitHub. Your support helps the project grow and encourages future updates.

---

🇹🇯 کوردی (سۆرانی)

📖 دەربارەی پڕۆژە

کۆمەڵێک لە ٤٦ پێکهاتەی دوگمەی مۆدێرن کە بە تەواوی بە Pure CSS دروستکراون. DihokButtons کتێبخانەی دوگمەکانی CSS ە کە کێشی سووکە و وابەستەیی سفرە و بۆ ئەوە دروستکراوە کە چەندین کاتژمێر لە کاتی ستایلکردنت بۆ پاشەکەوت بکات. جا تۆ پرۆتۆتایپێکی خێرا دروست دەکەیت یان بەرنامەیەکی وێبی پلە بەرهەمهێنان، ئەم دوگمانە دیمەنێکی پیشەیی و مۆدێرن پێشکەش دەکەن

✨ تایبتمەندیەکان

✴٤٦ دیزاینی دوگمەی ناوازە
✴بە CSS دروستکراوە
✴پێویست بە جاڤاسکڕێپت ناکات
✴هیچ چوارچێوەیەک و کتێبخانەیەکی نایەوت
✴ئاسانە بۆ خۆکارکردن
✴افکتەکانی هۆڤەر و ترانزیشن مۆدێرن
✴ئامادە بۆ بەکارهێنان

📦 دامەزراندن

کۆگاکە کلۆن بکە:

فەرمانی bash

git clone https://github.com/SirwanCode/dihokbuttons.git

یان فایلە ZIP دابەزێنە، و پاشان DihokButtons.css لە پرۆژەکەتدا دابنێ.

<link rel="stylesheet" href="css/DihokButtons.css">

📖 بەکارهێنان

✳نمونە بەکارهێنان (بۆ button-003)

<button class="dButton-003 dButton-003-red">Button</button>

➰ بۆ گۆڕینی ڕەنگ، تەنها "dButton-003-blue" بگۆڕە بە یەکێک لەمانەی خوارەوە

    🔷 dButton-003-green
    🔷 dButton-003-red
    🔷 dButton-003-violet
    🔷 dButton-003-orange

✳نمونە بەکارهێنان (بۆ button-044)

<button class="dButton-044 dButton-044-blue">
     <span class="icon">&#128386;</span>
     <span class="text">  Button </span>
</button>

➰ بۆ گۆڕینی ڕەنگ، تەنها "dButton-044-blue" بگۆڕە بە یەکێک لەمانەی خوارەوە

    🔷 dButton-044-green
    🔷 dButton-044-red
    🔷 dButton-044-violet
    🔷 dButton-044-orange

➰بۆ گۆڕینی ئاراستەی دوگمەکە، "dButton-044" بگۆڕە بە "dButton-044-rtl"

📌📌📌 فایل index.html بکەرەوە و هەموو دوگمەکان و چۆنیەتی زیادکردنی هەریەکەیانمان خستۆتە ڕوو📌📌📌

🎨 گۆڕانکاری

دەتوانیت بە ئاسانی ئەمانە بگۆڕیت:

• ڕەنگەکان
• فۆنتەکان
• تیژڕەوی border radius
• پادکردن Padding
• سێبەرەکان
• افکتەکانی هۆڤەر
• ئەنیمەیشن
• خێرایی ترانزیشن

🔶 تەنها DihokButtons.css بکەرەوە و دوگمەکە بدۆزەرەوە و تایبەتمەندیەکانی بگۆڕە

💢 بۆ زیادکردنی سێتی ڕەنگی نوێ:

     ◼ DihokButtons.css بکەرەوە

     ◼ لە root: دا ڕەنگی نوێ زیاد بکە بە ڕووناکی جیاواز

   /* green in HSL */
   --btn-green:#099268;
  --hue-green:165;
  --sat-green:80%;
  --btn-green-900: hsl(var(--hue-green), var(--sat-green), var(--light-900));
  --btn-green-700: hsl(var(--hue-green), var(--sat-green), var(--light-700));
  --btn-green-600: hsl(var(--hue-green), var(--sat-green), var(--light-600));
  --btn-green-500: hsl(var(--hue-green), var(--sat-green), var(--light-500));
  --btn-green-450: hsl(var(--hue-green), var(--sat-green), var(--light-450));
  --btn-green-300: hsl(var(--hue-green), var(--sat-green), var(--light-300));
  --btn-green-100: hsl(var(--hue-green), var(--sat-green), var(--light-100));
  --btn-green-093: hsl(var(--hue-green),  var(--sat-light), var(--light-093));

📁 پێکهاتەی پڕۆژە

DihokButtons/
├── css/
│   │   └── DihokButtons.css
├── preview/
│   │   └── dihokButtons-001.png
│   │   └── dihokButtons-002.png
│   │   └── dihokButtons-003.png
├── index.html
├── README.md
 

💻 دروستکراوە بە

• HTML5
• CSS3

🎯 مەبەست

من ئەمەم دروست کردووە بۆ ئەوەی کۆمەڵێک دوگمەی هەبێت کە زۆر جوان دەردەکەون بەبێ ئەوەی پشت بە چوارچێوەی قورس وەک Bootstrap یان Tailwind ببەستم. زۆر گونجاوە بۆ سایتەکانی پۆرتفۆلیۆ، داشبۆرد، یان هەر پڕۆژەیەکی کە UI پاکت دەوێت

🤝 بەشداریکردن

بەشدارییەکان بەخێرهاتن دەکرێن! ئەگەر دەتەوێت DihokButtons باشتر بکەیت یان ستایلەکانی دوگمەی نوێ زیاد بکەیت:

1. کۆگاکە fork بکە
2. دروستکردنی لقێکی تایبەتمەندی
3. گۆڕانکارییەکانتان commit بکەن
4. Pull Request بکەرەوە

⭐ پشتیوانی

ئەگەر ئەم پڕۆژەیەت بەدڵ بوو، بیر لەوە بکەرەوە کە ئەستێرەیەکی پێ بدەیت لە GitHub. پشتگیری ئێوە یارمەتی گەشەکردنی پڕۆژەکە دەدات و هاندەری نوێکارییەکانی داهاتووە.