Hi! I Need Help With Buttons!

Hi! I Need Help With Buttons!



I added buttons but I can’t seem to change the way they look(colour/ shape). Also I tried to change their positions and they didn’t move. Also when you click on them, they open-up instead of going to a new page. I googled it, but couldn’t seem to find a proper solution. Any ideas?

Thank you.



Hello ,
Here are a couple of things you might find useful and hopefully resolve your problem.

  1. Please don’t write your CSS inline,it’s a terrible practice and it’s hard to read your code , etc.
  2. I’ve seen you’re using bootstrap classes like row and col-xs-2 without having them linked to your pen. You can do this by clicking the settings button and pasting it into your css / js tab , respectively. Feel free to use this link .
    NOTE: You can’t move the elements in your row because you’ve set the col with to 2 , and it’s taking 2/12 of the space available. Try setting it to 6 or 12 and see the results.
  3. The reason why your buttons are not opening a new page is because they’re acting as a buttons rather than links. Try wrapping them in an “< a > </ a >” tag and set the href to go to the page you want.

I would strongly suggest for you to retake the course from the begining to the bootstrap section and try practicing a bit more , hopefully it’ll make a lot of things more clear.

Hopefully this helped , keep on coding! :tada:


Thank you so much! I was planning on taking the course from the beginning because I keep forgetting certain things and it is annoying.


I know how to add links in general, I don’t know how to add a link that I can’t see.

//this is an example of wrapping your link over a button
<a href="#myaboutpagesomewhere"><button>About me</button></a>

//or making your link "visible"
<a href="https://www.google.com">Go to google</a>


There isn’t a link for my about page(At least I can’t find it…) so I can’t really wrap it over a button. However thank you, I’ll remember to use these when I actually have a link. :slight_smile:


Hi there @lucretia ,

The #myaboutpagesomewhere was supposed to be a placeholder(just some dummy text) instead of an actual link.
In order to have link to your about page you have to create a new html file named aboutme.html (or something else .html) and place your content in it.
So , for example , your <a></a> tag would be something like this :

<a href="aboutme.html"><button>About me</button></a>

Note: Your aboutme.html has to be in the same directory as your index.html or whatever the current page is named as.
Note #2 : I’m not sure you can add a 2nd html file to codepen because I don’t use it personally , but the best way to attempt is locally.(using a text editor).
You can try some editors like : VS Code , Atom , Sublime text , etc…

Go ahead and attempt to do this , and let me know how it goes!
If you’re having any questions or doubts about certain things feel free to either reply here or message me privately.

Happy coding!


Thank you! Tried it. It technically works but because I don’t actually have a second page on codepen(like you said, I probably can’t add one, not sure about it, haven’t been here that long.)
Thanks for all your help! I appreciate it, especially when I feel a bit lost or keep forgetting how to write certain codes(hope I’ll start memorizing them soon).