Help with buttons/web badges

[everyport]

Hi! I'm making my first website (and damn it takes a lot of work, really makes me appreciate all the amazing small web websites out there more) and in every site I visit there's like a section with flashing colorful rectangles about a wide range of topics and some even link to other websites. I'm not even sure what they're called T-T,,, I've seen people call them buttons I think? But I also found the term web badge? I don't know.. but you probably know what I'm talking about already.

I think they're a really fun way to decorate a webpage and I want to have them in my website as well, but I'm having trouble finding information about them online. How do I make them? And if I find one I like in a website is it possible to find and copy the HTML and CSS of the button and use it myself (and is it okay to do so? Not sure if it's against common courtesy or not..)

And also is there like a big catalog or is it more through exploring a lot of different websites that I can discover more and more of these things? I can't wait to use them, they give the small web a lot of identity.

[nuclearblues]

the most common version of this is called an 88x31 button because of their usual dimensions. they're pretty ubiquitous on the indie web at this point, but aren't the only version of this general idea floating around. they're also sometimes called netscape badges due to the fact that they were popularized through their usage in the promotion of the netscape browser in the 90s.



'web badges' is a term which can be used to refer to those 88x31 buttons, but is also pretty commonly associated with these thinner 80x15 badges.



I've also seen a recent push towards 32x32 square shaped stamps/buttons as an alternative, as well as a few other forms of microart all over the place. and of course blinkies are ever-popular, though less as a way of representing and linking to other sites and more often as an expression of personal interest.

web buttons and similar graphics are generally seen as free-use, though if you decide to use one on your site it's common courtesy to link back to the source's site. it's also HEAVILY encouraged that you host the image on your own site rather than hotlinking, though some people do prefer hotlinking in case they change their button's image in which case they will probably have a field of code which you can copy next to the button.

you can either make your own button in an image editor like paint or GIMP, or you can use this super cool online button maker. have fun!

[Melooon]

And also is there like a big catalog

For personal badges, you'll usually find them on peoples sites; for more generic badges like "Made with Notepad" there are a few big collections; PixelSea has a bunch you can search! https://pixelsea.neocities.org/?m=badge

Also yes the term badge/button is interchangeable, I favor badge simply because its harder to confuse with a HTML button which is totally different!

[everyport]

web buttons and similar graphics are generally seen as free-use, though if you decide to use one on your site it's common courtesy to link back to the source's site. it's also HEAVILY encouraged that you host the image on your own site rather than hotlinking, though some people do prefer hotlinking in case they change their button's image in which case they will probably have a field of code which you can copy next to the button.

you can either make your own button in an image editor like paint or GIMP, or you can use this super cool online button maker. have fun!

oh yeah i have seen people talking about hotlinking, i'll be careful with that. Also thanks a lot for the button maker! Feel like making it from scratch might be a LOT.

For personal badges, you'll usually find them on peoples sites; for more generic badges like "Made with Notepad" there are a few big collections; PixelSea has a bunch you can search! https://pixelsea.neocities.org/?m=badge

Also yes the term badge/button is interchangeable, I favor badge simply because its harder to confuse with a HTML button which is totally different!

That website has a lot of them, thank you! Also I love how they made it into a printer it's so good. Also yeah, that's what was happening, only tutorials and tips about HTML buttons were showing up.

This might be enough for me to get started so thanks!

[bingus_baby]

If you wanna get into making some, I recommend GraphicsGale. It's easy to make GIFs with, though the learning curve is a bit frustrating. But it's WAY better than using, say, Photoshop.




Proudly made with GraphicsGale!

[candycanearter07]

If you wanna get into making some, I recommend GraphicsGale. It's easy to make GIFs with, though the learning curve is a bit frustrating. But it's WAY better than using, say, Photoshop.




Proudly made with GraphicsGale!

Anything would be better than using Photoshop. I personally find aseprite works well enough for gifs, though getting gifs of different time spans to line up is very painful.

[Melooon]

Anything would be better than using Photoshop

Im not sure that's really fair, Photoshop is an incredibly good program with a long history with pixel artists, pixel art tutorials and interesting pixel art focused extensions and tools. All that said I totally agree you should not be paying for Photoshop to make site badges!

HOWEVER is you snoop around Archive sites you can find Photoshop 7.0 from the early 00s, along with software keys easily. It should still run on modern Windows or on a Mac/Linux via wine, and its a very good choice for making site graphics

[candycanearter07]

Im not sure that's really fair, Photoshop is an incredibly good program with a long history with pixel artists, pixel art tutorials and interesting pixel art focused extensions and tools. All that said I totally agree you should not be paying for Photoshop to make site badges!

HOWEVER is you snoop around Archive sites you can find Photoshop 7.0 from the early 00s, along with software keys easily. It should still run on modern Windows or on a Mac/Linux via wine, and its a very good choice for making site graphics

mmmmfine, I just really hate Adobe as a company. I used to use Flash CS6 for art, from archive websites. If you're already paying for PS, feel free to use it..