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:

1 Like

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.

1 Like
//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>
1 Like

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!

1 Like

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).

1 Like