diff --git a/STYLES.md b/STYLES.md new file mode 100644 index 0000000..361cea3 --- /dev/null +++ b/STYLES.md @@ -0,0 +1,62 @@ +![logo](assets/md-badges.png) + +
+ +# ⛩️ Types of Badges ⛩️ + +[shield.io](https://github.com/badges/shields) has 5 different styles of buttons, including: + +|| Types | Styles | +| :-: | :------------ | :-------------------------------------------------------------------------------------------------------- | +| 1 | Plastic | ![Plastic](https://shields.io/badge/this%20is%20a%20plastic%20badge-03650f?logo=github&style=plastic) | +| 2 | Flat-Square | ![Flat-Square](https://shields.io/badge/this%20is%20a%20flat%20square%20badge-03650f?logo=github&style=flat-square) | +| 3 | Flat | ![Flat](https://shields.io/badge/this%20is%20a%20flat%20badge-03650f?logo=github&style=flat) | +| 4 | Social | ![Social](https://shields.io/badge/this%20is%20a%20social%20badge-03650f?logo=github&style=social) | +| 5 | For The Badge | ![For-The-Badge](https://shields.io/badge/this%20is%20a%20for%20the%20badge%20(badge)-03650f?logo=github&style=for-the-badge) | + +This project uses **Flat** badges for the sake of simplicity, similar to how [markdown-badges](https://github.com/Ileriayo/markdown-badges) uses **For The Badge** badges for theirs. + +If you want to change the style of your badge, add the following code into your badge: + +## **Plastic:** + +`style=plastic` + +Example: `![GitHub](https://img.shields.io/badge/GitHub-%23121011.svg?style=plastic&logo=github&logoColor=white)` + +Result: ![GitHub](https://img.shields.io/badge/GitHub-%23121011.svg?style=plastic&logo=github&logoColor=white) + +## **Flat Square:** + +`style=flat-square` + +Example: `![YouTube](https://img.shields.io/badge/YouTube-%23FF0000.svg?style=flat-square&logo=YouTube&logoColor=white)` + +Result: ![YouTube](https://img.shields.io/badge/YouTube-%23FF0000.svg?style=flat-square&logo=YouTube&logoColor=white) + +## **Flat:** + +`style=flat` + +Example: `![Twitch](https://img.shields.io/badge/Twitch-%239146FF.svg?style=flat&logo=Twitch&logoColor=white)` + +Result: ![Twitch](https://img.shields.io/badge/Twitch-%239146FF.svg?style=flat&logo=Twitch&logoColor=white) + + +## Social + +`style=social` + +Example: `![GitHub repo watchers](https://img.shields.io/github/watchers/badges/shields.svg?style=social)` + +Result: ![GitHub repo watchers](https://img.shields.io/github/watchers/badges/shields.svg?style=social) + +## For The Badge + +`style=for-the-badge` + +Example: `![Spotify](https://img.shields.io/badge/Spotify-1ED760?style=for-the-badge&logo=spotify&logoColor=white)` + +Result: ![Spotify](https://img.shields.io/badge/Spotify-1ED760?style=for-the-badge&logo=spotify&logoColor=white) + +