Skip to content
← Back to Community
Badges
Profile icon
h
has Hacker Plan
CoolCoderSJ

Have you ever wanted to add a tiny badge to your website? Or perhaps wanted to add a copyright symbol telling users who made the website without a full blown sticky footer? Now you can!

Introducing Badges

Very innovative name, I know.

Just add this piece of code to your website and you're all set! Just make sure to replace YOUR TEXT HERE with your text.
Also make sure to replace the link in line 2 of the following codeblock with your own link.

<link rel="stylesheet" href="https://badge.coolcodersj.repl.co/style.css"> <a class="badge" href="https://repl.it/@USER" target="_blank"> <img src="https://CoolCoderSJ.repl.co/replit-logo.svg" alt="replit" />YOUR TEXT HERE</a>

The badge is a small sticky badge in the bottom right corner. Example repl linked.

Multiple badges

Badges has support for up to 4 badges total. To add a badge, copy the same code, but change the class in line 2 to one of these classes -
badge This class is the bottom-most badge
badge2 This class is the second bottom-most badge
badge2 This class is the second topmost badge
badge4 This class is the topmost badge

Animations

When you hover over a badge, the replit logo spins. To prevent this, or if you're putting in your own image, add the class no-animate. An example of this is the Github badge (last badge on example). The replit logo spins, but the Github logo does not.

Edit: Thanks for trending guys!

Voters
Profile icon
DaCuteRaccoon
Profile icon
k9chelsea2
Profile icon
ch1ck3n
Profile icon
Hibaosama
Profile icon
ItBCode
Profile icon
Knecinedit
Profile icon
clit
Profile icon
piphi
Profile icon
thkc
Profile icon
AryyanVineeth
Comments
hotnewtop
Profile icon
johnnyfrancis

And don't forget to chance the link. Otherwise it will bring you to:
https://coolcodersj.repl.co/
DID YOU JUST TRY TO GET FREE ADVERTISING?!?!?!?!

Profile icon
CoolCoderSJ

@johnnyfrancis that is an example repl. The above code says "@user", where user is your username. I needed to put a valid url for it to work.

Profile icon
CoolCoderSJ

@johnnyfrancis I have never and will never self-advertise on replit. I may put my content in a post, but will never try to advertise.

Profile icon
nbbcsf

@CoolCoderSJ how did you make a single subdomain for your site? Usually it's https://..repl.co but yours is just https://.repl.co ??

Profile icon
CoolCoderSJ

@nbbcsf Name the repl your exact username. For example, that repl is named "CoolCoderSJ"

Profile icon
johnnyfrancis

@CoolCoderSJ k i understand

Profile icon
nbbcsf

@CoolCoderSJ cool thanks!

Profile icon
idontknoiw

@nbbcsf If you create a repl named "nbbcsf", the URI will be something like "nbbcsf.repl.co" (assuming you using something that needs a site).

Profile icon
RohilPatel

If u go to freenom.com u can get like even more of a custom domain! @nbbcsf

Profile icon
[deleted]

@RohilPatel freenom is a scam. sure they give you free domains, at the cost of your personal info exposed on the dark web, and the peace of mind that if your website is underated or overrated they will deregister it, and the fact that they have redirected people's registered domains to adult sites. get a free domain from the github student developer pack or buy one.

Profile icon
RohilPatel

Well, that's what people may say. Now show me evidence that any of what you are claiming is true @novaflippers

Profile icon
Whippingdot

Luv tis, tho we should be able to customize the CSS and the icon, but in an easy way...

Profile icon
catchacoled

You probably could change the image on it if you changed the name of the source for that image and it could possible change the image on is and the @Whippingdot

Profile icon
CoolCoderSJ

@Whippingdot the image is customizable, just change the image source

as for the css, you can override it by using the badge CSS class

Profile icon
Whippingdot
Profile icon
RohilPatel

If you want I could make something that does that @Whippingdot

Profile icon
CoolCoderSJ

@RohilPatel if you know decent web dev customization is pretty easy as is.

Profile icon
Whippingdot

make it pease @RohilPatel

Profile icon
RohilPatel

Best and cleanest if you just make an api smh @CoolCoderSJ

Profile icon
CoolCoderSJ

@RohilPatel again- The code is literally 3 lines. If you know almost any html and/or css, you can customize it. The code is made for people who know html and/or css, I don't see any other way you could implement it without knowing any html at all.

Profile icon
RohilPatel

Using a link bruh @CoolCoderSJ

Profile icon
Whippingdot

fine i will customize it myself 😒😭 im lazy @CoolCoderSJ

Profile icon
ch1ck3n
.badge:hover{ background-color: rgb(26, 43, 63) !important; } .badge{ transition: 0.2s !important; } .badge img:hover, .badge:hover > img, .badge2 img:hover, .badge2:hover > img, .badge3 img:hover, .badge3:hover > img, .badge4 img:hover, .badge4:hover > img{ animation-name: spin !important; animation-duration: 2s !important; animation-timing-function: cubic-bezier(0.80, 0, 0.20, 1) !important; animation-iteration-count: infinite !important; } @keyframes spin{ 0% { transform: scale(1) rotate(0); } 25% { transform: scale(1) rotate(90); } 50% { transform: scale(1) rotate(180); } 75% { transform: scale(1) rotate(270); } 100% { transform: scale(1) rotate(360deg);} }

add this to your css

Profile icon
CoolCoderSJ

@ch1ck3n not sure what most of it is just by skimming, but it made things a lot better by adding transition: 0.2s !important;, thanks.

Profile icon
johnnyfrancis

WAIT WHAT?!?!?!? Instead it brought me here:https://replit.com/@user?tab=comments

Profile icon
CoolCoderSJ

@johnnyfrancis Sorry if it wasn't clear enough, but you have to change the link in the code in line 2 of the codeblock above. I have edited the post to make it clearer now.

Profile icon
noway15

POG

I want to get into webpage design someday, but I have no clue where to start. This is better than anything I could make

Profile icon
CoolCoderSJ

@noway15 https://w3schools.com/ is always a great place to start :)

Profile icon
noway15

thx @CoolCoderSJ looks like I'll learn HTML and then once I have that down I gotta take up Java bcuz I want to make my own mobile app one day

Profile icon
PyraxisYT

@noway15 codecademy is another great option for you

Profile icon
noway15
Profile icon
noway15

@CoolCoderSJ how do I upload an image to HTML?

Profile icon
CoolCoderSJ

@noway15 do you mean a repl? If you mean a repl, click the three dots on the top right corner of the files bar, click upload file

To use an image in html, do

<img src="IMAGE URL HERE" alt="ALT TEXT HERE" />
Profile icon
noway15

@CoolCoderSJ yeah but like how do I find the image URL

Profile icon
CoolCoderSJ

@noway15 right click on image > Copy Image Link

the text may vary between browsers

Profile icon
DSAJagat20

@noway15 HTML is the best language for webpages

Profile icon
noway15

ik @DSAJagat20 but my ultimate goal is to create mobile apps

Profile icon
DSAJagat20

@noway15 oh. mobile apps? I suggest python or JavaScript for that

Profile icon
noway15
Profile icon
CoolCoderSJ

@noway15 Mobile apps are not made with HTML. To make a mobile app, you need one of the following languages -

  • Swift - iOS and macOS apps
  • Python - Desktop apps
  • Kotlin or Java - Android Apps

You can most certainly turn a website into a desktop app, but your goal is mobile.

Profile icon
IMightBeMe

You could also use unity and build for iOS/android. It uses C# which is really similar to Java @DSAJagat20

Profile icon
mollthecoder

@IMightBeMe Not really

Profile icon
noway15

ik @CoolCoderSJ which is why I want to make webpages first, then apps

Profile icon
IMightBeMe

What do you mean? C# is similar to Java. The syntax is basically the same and C# was built off of Java. @mollthecoder

Profile icon
noway15

@IMightBeMe I have no clue what this argument is about but please don't use this comment thread to argue. Just make a post saying that

"C# and Java are almost the same."

settle your differences there.

Profile icon
IMightBeMe
Profile icon
CoolCoderSJ

@noway15 @IMightBeMe I prefer you guys open a new repl and use multiplayer chat or threads as I get notifications for each message sent on this post.

Profile icon
IMightBeMe

Yea sorry about that. @CoolCoderSJ

Profile icon
PyraxisYT
Profile icon
tussiez

@noway15 @CoolCoderSJ Uhh, a lot of apps on the App Store are now just web apps (e.g Amazon).

Profile icon
Glitterpoop

@noway15 two main ways:
if the image is online, and you're using chrome, right-
click>copy image address (provided that the website you're
copying from, did not use a local link from their local
computer)

now, if the image is offline:
1) if the image is 'example.jpeg' and it is located
locally on your pc, then in your code, you can just call
it 'example.jpeg'
2) if the image is 'example.jpeg' , and its located
locally on your disk, then open its file location, in file
explorer(windows). Right-click it > open with > google
chrome (or any other browser). Now, once browser pops up
with the image, copy the url from the url bar. it will be
something like c:/user/folder/subfolder/example.jpeg

Profile icon
LiamBerube

@noway15 There is also mimo on mobile

Profile icon
noway15
Profile icon
hg0428

When I hover it gets a little bigger, then if I hover one more second it gets even bigger. Could you make the size change smother and remove the second size change?

Profile icon
lthon09

that is kewl

Profile icon
LingWu1
Profile icon
FlaminHotValdez

SO COOL! I added it to my site

Profile icon
thrkturner

@FlaminHotValdez Wow! Your site looks really cool! Thanks for sharing it with us!

Profile icon
FlaminHotValdez

@thrkturner :D thanks

Profile icon
thrkturner

@FlaminHotValdez Your Welcome!

Profile icon
firefish

@FlaminHotValdez That's an amazing website! I wish I could make websites with CSS that good!

Profile icon
FlaminHotValdez

@firefish Thanks!

Profile icon
RayhanADev

Screenshot 2021-04-03 114929
Congrats, your post is the basis for my new ReplFans extension :)

Profile icon
CoolCoderSJ

@RayhanADev awesome :D

Your injection looks nice...

Profile icon
RayhanADev

@CoolCoderSJ yeah I'm working on polishing it a bit, but so far so good :D

Profile icon
DepthStrider03

damn how did you get the https://coolcoderSJ.repl.co domain??? omg i neeeeeeeed it

Profile icon
tussiez

@DepthStrider Make a repl with your username: e.g tussiez.tussiez.repl.co == tussiez.repl.co

Profile icon
DepthStrider03

@tussiez Thanks! :D

Profile icon
tussiez

@DepthStrider No problem :)

Profile icon
RohilPatel

Why not try and get a custom domain for free? @DepthStrider

Profile icon
DepthStrider03

@RohilPatel actually i do know how to do that and I actually do use one on a repl of mine (repl here). however the domain suffixes are stupid and have no relation to the project. The ones you can get for free are ones like .tk, .gq, etc, (those you can get from https://www.freenom.com) You can't get "premium" url suffixes for free that actually make sense and aren't meant for other countries** (like .bot, for instance, would be a sensible one. I make discord bots so that would be a sensible url suffix)

** What I mean by "from other countries": .tk is for Tokelau, a territory of New Zealand

Profile icon
DepthStrider03

I promise that none of the links in the above comment are rick rolls. just to be clear ;)

Profile icon
RohilPatel

Hee hee, but u gotta say, ml sounds somewhat professional. But yeah, ur right @DepthStrider

Profile icon
nameless12321

Wait what do I do?

Profile icon
CoolCoderSJ

@nameless12321 There are very clear instructions in the post. Please read it through carefully. If you do not know web dev, then you cannot use this.

Profile icon
ZarmDev

transition: 0.5s;
It looks cleaner

Profile icon
CoolCoderSJ

@ZarmDev added, thanks

Profile icon
JDOG787

looks good, maybe add a transition so its smoother?

Profile icon
CoolCoderSJ

@JDOG787 added, looks much better now! Mind upvoting if you liked it?

Profile icon
JDOG787

@CoolCoderSJ noice! and sure

Profile icon
FrancescoScotto

@CoolCoderSJ I am recruiting devs for my team, I need someone who knows basic Node.js, and python. Do you wanna join?

Profile icon
CoolCoderSJ

@FrancescoScotto no thanks :)

Profile icon
FrancescoScotto

@CoolCoderSJ Ok thats cool

Profile icon
LiamBerube

@FrancescoScotto I know some basic python and am willing to help because I have nothing to code

Profile icon
thrkturner

@FrancescoScotto I know python, can I join?

Profile icon
FrancescoScotto

@thrkturner Hey sorry for the 3 day late response (lol). Sure, you can join.

Profile icon
thrkturner
Profile icon
FrancescoScotto
Profile icon
IntellectualGuy

Hey for the GitHub logo I found a cool animation that someone made here, maybe you could implement it here?

Profile icon
CoolCoderSJ

@IntellectualGuy I certainly could, but its highly customizable. You can change the URL of the image.

Profile icon
arbee

Cool, buuuuuut DOWN WITH COPYRIGHT

  • This comment under a CC BY license
Profile icon
firefish

Yay! Something that looks better than shields!

Profile icon
CoolCoderSJ
Profile icon
lilykhan

cool

Profile icon
CoolCoderSJ

@lilykhan thanks

Profile icon
jachands

This is so cool!! Added it to my site https://uuid.rocks/ :D

Profile icon
CoolCoderSJ

@jahands nice!

Profile icon
jachands

@CoolCoderSJ Thanks! Also congrats on your project being tweeted by Replit! https://twitter.com/replit/status/1377360311901069313

Profile icon
CoolCoderSJ

@jahands oh nice thats cool...!

Profile icon
RayhanADev

WOW, that's just beautiful! I love seeing these kewl little Replit things for Replit :D
Now if ReplAuth had beautful CSS like this...

Profile icon
CoolCoderSJ

@RayhanADev thanks!

lmao

Profile icon
JoeyLent

@CoolCoderSJ Wow, I really like how this looks! I also like your other work! With a bit of tweaking, this could definitely prove useful in future projects.

I made my own fork and took a different approach. Using JavaScript, I was able to create custom HTML tags in replacement of classes. I elaborated a bit using comments in the code.

Happy coding!

Profile icon
CoolCoderSJ

@JoeyLent your fork looks great! However, I prefer to stick with pure css because it is highly customizable by the client. If the user wishes, they can change the background color, font, etc. (Documentation coming soon) on their own. Your fork seems great, but it is a fixed setting.

Profile icon
PikachuB2005

@CoolCoderSJ So, I can't add multiple badges because they overlap... is there a way to change this without rewriting all of the code you have for it?

Profile icon
CoolCoderSJ
Profile icon
CoolCoderSJ

@PikachuB2005 done, check updated post

Profile icon
PikachuB2005

@CoolCoderSJ thanks.

Profile icon
PikachuB2005

@CoolCoderSJ When you hover over the button it goes back down to the original position of the first badge.

Profile icon
CoolCoderSJ
Profile icon
PikachuB2005

Thanks. Just wanted to let you know.

Profile icon
Wilke000

This should be in templates

Profile icon
CoolCoderSJ

@Wilke000 It could be

But i felt like sharing something that I had made

Profile icon
IMightBeMe

How would I link this css file to my flask webpage?
Edit: NVM I can do the normal HTML for it.

Profile icon
[deleted]

pog

:D

Profile icon
CoolCoderSJ

@TheC0derGirl thanks =D

Profile icon
[deleted]
Profile icon
[deleted]

Bro this is amazing I can edit it a little bit to act like github

Profile icon
CoolCoderSJ

@novaflippers what do you mean by "act like github"?

Profile icon
[deleted]

@CoolCoderSJ Saying like a github widget that represents a github repository lmao

Profile icon
CoolCoderSJ

@novaflippers done, look at the bottom-most badge on the example.

Profile icon
[deleted]

@CoolCoderSJ POG IT LOOKS SO GOOOD

Profile icon
CoolCoderSJ

@novaflippers If you want to copy the code for it, go to the example repl and copy lines 10-13, don't change image url, and customize as fits.

Profile icon
[deleted]

@CoolCoderSJ Coolz nice, I want to add it to my personal website

Profile icon
CoolCoderSJ
Profile icon
JWZ6

very pog

Profile icon
CoolCoderSJ

@JWZ6 yep :D

Profile icon
Ravost

I changed the cursor hover to context-menu and it also looks cool!
cursor: context-menu;

Profile icon
CoolCoderSJ

@Ravost nice!

Profile icon
ch1ck3n

IM USIN IT

Profile icon
CoolCoderSJ