Willy/md-badges
1
0
Fork 0
mirror of https://github.com/inttter/md-badges.git synced 2026-05-06 10:26:57 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

+ 📃 Added summary about styles of badges (#33)

Browse source
This commit is contained in:
Inter 2023-12-10 23:09:21 +00:00
parent c0466283db
commit 2895636957
1 changed files with 62 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

62
STYLES.md Normal file
View file

@ -0,0 +1,62 @@
![logo](assets/md-badges.png)
<div align="center">
# ⛩️ 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)