You Are: Adding Buttons

Adding buttons is really simple. It comes with a complicated line of code though, which is why I've put that line of code here to copy and paste;

<div style="background-color: #ffffff; border: 2px solid #000000; color: #000000; padding: 10px; border-radius: 10px; width: 100px; display: inline;"><a href="link">Text</a></div>

Yes, that whole thing. Don't worry, the only bits you really need to change are the two underlined parts - 'link' and 'text'. The link part should be replaced with wherever you want your button to take you - say, for instance, a youtube link, or another page on your website - and the text should be replaced with whatever you want the button to say. So, for instance, if you wanted the button to take you to the homepage, you'd replace the link with the URL of your website, and replace the text with the word 'Home', or 'Index', or really whatever you want.

If you want to, you can change how your button looks too, and because they share similar code, this also goes for the text box this is written in, and the box at the top that tells you what page you're on. Here's how you customise;

background-color: #ffffff

This changes the colour of the button itself. To modify this, you want to go to a hex colour picker (like this one) and pick out the colour you want, then copy and paste the hex code, getting rid of the '#ffffff'. They'll come out like this;

Example

Example

border: 2px solid #000000

This determines the size and colour of the border. Same as with the background colour, choose a hex code and paste it in, and make the number before 'px' lower or higher until it's as big or as small as you want. You could have buttons that looks like these;

Example

Example

padding: 10px

This changes the gap between the edges of the text and the edges of the button. You can make it higher for a larger button, and lower for a smaller one. For example;

Example

Example

border-radius: 10px

This changes the shape of the button. You can lower the number to zero for a completely square button, or change it to something high, like 100, for a completely rounded button. Anywhere in between will be a sliding scale of rounded edges. Like so;

Example

Example

<a href="link">Text</a>

This determines where the button takes you. If you want your box to function as just text space rather than a button, just remove this entire string except for the part that says 'text' - then you can replace that with whatever you want it to say.

This one doesn't really need an example, but here's one anyway! You can't click this button, see?

You don't have to change any of these settings, but if you want some extra decoration and personalisation it's always nice to understand how. If you're curious, do play around with the settings! If something goes wrong and you can't tell what, it's easily fixed with ctrl+z.