Buttons Masterpost (HTML, F2U)

INTRODUCTION

Hi! This is a button tutorial!

Usually in HTML you can do this:

#Stuff Here#

You can't do that on Toyhouse. Hi, welcome to Hellsite!

Because Toyhouse is like... 10 years behind the rest of the coding world, we have to make buttons the old fashion way.

(For the record, YES! You can copy and paste this and use it in your own code! You don't even have to credit me. (How would you even do that for a snippet anyway?) I do ask one thing though: If you DO feel like this has helped you, please favourite this. It's all I ask for. Thank you!)

Here are some definitions to get us started here.

• Bootstrap: A framework that allows different types of styling/ functions that would otherwise require the use of Javascript. It can be used to refer to tabs, carousels, accordions, responsiveness, colours etc. For this post, whenever I refer to "bootstrap" it's pretty much always in regards to towards the bootstrap colours. (Also yes, me bullying the bootstrap colours is a joke, I actually don't mind people using bootstrap colours- I don't actually hate bootstrap- I'm just being FUNNY-)
• href="#": The # is where you're meant to provide your own hyperlink.
• Font: The style in which words are written. Like digital handwriting! (I mean... If you don't know this... Where have you been for the past 20 years? And why was your first instinct to check Toyhouse, for goodness sake?)

The Bare Minimum

This is the absolute bare minimum a button needs to be. Nothing more, nothing less.

If you're wondering why it has colour, that's because it's in Bootstrap. Bootstrap, if you aren't aware, if basically colours but they change slightly to look slightly nicer depending on what light mode/dark mode/extra dark mode/bee movie mode you're on.

(Please remove the . in the <.a> and <./a> tags.

Primary<.a class="btn btn-outline-primary" href="#">Primary<./a>

Secondary<.a class="btn btn-outline-secondary" href="#">Secondary<./a>

Success<.a class="btn btn-outline-success" href="#">Success<./a>

Danger<.a class="btn btn-outline-danger" href="#">Danger<./a>

Warning<.a class="btn btn-outline-warning" href="#">Warning<./a>

Info<.a class="btn btn-outline-info" href="#">Info<./a>

Each line here is each of the colours shown in boostrap colours. The code to the right is the code to get this version of the button.

Because I GENUINELY don't know anyone who actually uses bootstrap colours on their code-edits, here's the bare minimum for code WITHOUT using boostrap.

Button<.a class="btn btn-outline"href="#" style="border-color:#7544C7; color:#7544C7">Button<./a>

Now, you may notice that if you hover your mouse over this non-bootstrap one the fill colour doesn't change. The reason for this is "because you're inserting a custom colour, and thus "overriding"/ interfering with the CSS that is applied to the buttons." So basically, if you to have the button do the cool colour-change thing, you'd need to do this:

Button <.a class="btn btn-outline-primary:hover {background-color:#7544C7; border-color:#7544C7; color:#FFFFFF;}" href="#">Button<./a>

Oh! It didn't work! This is because :hover pseudo-class which can only be done with CSS, a Premium-only feature. I don't have premium (as of making this) so this is kind of... Doomed to not work here? If you have CSS, please test this out. I'd be interested to know if this actually would work. Theoretically it should, but then again: Theoretically: All code should work on the first try.

Anyway, apologies if that actually doesn't work.

The Bare Minimum: Part II

Okay, so as a bonus, here's a bunch of those boostrap buttons but already filled in.

Primary<.a class="btn btn-primary" href="#">Primary<./a>

Secondary<.a class="btn btn-secondary" href="#">Secondary<./a>

Success<.a class="btn btn-success" href="#">Success<./a>

Danger<.a class="btn btn-danger" href="#">Danger<./a>

Warning<.a class="btn btn-warning" href="#">Warning<./a>

Info<.a class="btn btn-info" href="#">Info<./a>

As I'm sure you can see here, "Secondary" isn't filled in. That's because Secondary is weird and seems to operate on the principle of... "IF you're on dark mode, I'll get lighter, if you're on light mode I'll get darker." I don't really know.

Like I said, nobody uses bootstrap and those that do are Fake Gamers.

Anyway, if you're wondering why I've left out the Non-Boostrap button, don't worry, we're just getting to that now.

STYLE INTRODUCTION

If you're an eagled-eyed reader/coder (or just coming here to copy and paste the code. Yes, this will be me after I'm done. You and me both, buddy,) then I'm sure you'll have noticed that during the Non-Bootstrap code I had to use this to get the colour.

style="border-color:#7544C7; color:#7544C7;"

This is style. Basically, it allows you to customise your buttons to your little heart's desire. Specifically? It can let you customise:

• Background Colour
• Text Colour
• Border Colour
• Border Thickness
• Which Sides Have Borders?
• Text Font
• Probably More. Add them here.

So yeah! If you just came here to learn about bootstrap, first of all: Ew. Second of all, you can skip this next colour section. I'd IMAGINE font, border thickness and which sides borders come on works on bootrap too.

COLOURS N STUFF

Right! Background colour time! This is how you do background colour

Button<.a class="btn btn-outline"href="#" style="background-color:#7544C7;">Button<./a>

As you can see here, the text is that annoying shade of Hyperlink-Blue. (No, I'm not adding that to the F2U Adjectives list. That's terrible.) But what if you don't want it to look like that? Well, you can change the text colour!

Button<.a class="btn btn-outline"href="#" style="color:#7544C7;">Button<./a>

But oh no! That one doesn't look like a button, it just looks like... Hyperlinked text. However will we know it's actually a button? With a border, of course!

Button<.a class="btn btn-outline" href="#" style="border-color:#7544C7;">Button<./a>

But what if we combined all of these colours into one button? Well, it could look like something like this!

Button<.a class="btn btn-outline"href="#" style="background-color:#24143E; color:#EA88FE; border-color:#7544C7;">Button<./a>

BORDERS

Anyway, borders! Does anyone else get annoyed just how thin the default border is? I know it's meant to be just 1 pixel but... C'mon.

I think we should fix that.

Here's how you can change the border size of your button. I've personally set this border to 4px but you can change it to whatever you want!

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 solid;">Button<./a>

I bet you're wondering what all that means. (Or not. Probably not actually.) border:4px means the border has a 4 pixel width all the way around. The hexcode there defines what colour your border is and "solid;" means your border is solid.

Anyway, here's a list of all the things you can do INSTEAD of solid. (With thick borders just so it's a bit easier to see.)

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 dotted;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 dashed;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 double;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 groove;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 ridge;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 inset;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 outset;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 none;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 hidden;">Button<./a>

And finally, as a bonus: You can yoink a border from the button. And here's how! (With thick borders so you can see.)

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 solid; border-bottom: 0;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 solid; border-left: 0;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 solid; border-above: 0;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border:4px #7544C7 solid; border-right: 0;">Button<./a>

As far as I'm aware, you can't combine these to have 2-3 sides missing. You can only have one missing side per button. I could be wrong though, please tell me if I am!

So. What would a button with all this border tomfooley even look like? Well folks, I present you with!! The Simon Button! (Why that name? Because I have a character called Simon and I love them to bits, that's why.)

Simon<.a class="btn btn-outline"href="#" style="border:4px #7544C7 inset; border-right: 0;">Simon<./a>

And, because I'm generous, here's a bonus button with the colour stuff too!

Simon<.a class="btn btn-outline"href="#" style="background-color:#24143E; color:#EA88FE; border-color:#7544C7; border:4px #7544C7 inset; border-right: 0;">Simon<./a>

MISC

This is just other stuff that I couldn't fit anywhere, oops.

This is text alignment, it changes how close to the edge your text is and which edge it's closer to basically.

Okay, update, it didn't work, rude. Someone help o,v,o

Button<.a class="btn btn-outline"href="#" style="border-color:#7544C7; color:#7544C7; text-align: left;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border-color:#7544C7; color:#7544C7; text-align: center;">Button<./a>

Button<.a class="btn btn-outline"href="#" style="border-color:#7544C7; color:#7544C7; text-align: right;">Button<./a>

This is fonts, it changes the font of the text in the button.

Button<.a class="btn btn-outline"href="#" style="border-color:#7544C7; color:#7544C7; font-family:'comic sans ms',sans-serif;">Button<./a>

And finally size! Size matters a lot, actually.

Button<.a class="btn btn-outline"href="#" style="border-color:#7544C7; color:#7544C7; font-size:18px;">Button<./a>