Add links to and center buttons

[daveharte1]

I there, I’m hoping someone could help me with this..

I’m using the following method to add buttons to my page but I can’t get the to align in the center of the page and also add hyper links to each button to link to another page..

Thanks very much in advance.

David

http://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_shadow

[Beverleyh]

Hmmm, if you’re using buttons to navigate to other pages/resources, you’re using the wrong element – an anchor is what you want. More info on when to use buttons or anchors can be found here https://davidwalsh.name/html5-buttons

It sounds like you want to centre-align multiple “buttons” in a page. Are you trying to build a menu at all? If so, there are better ways to construct one, namely using an unordered list. The way to centre elements changes depending on what the element is, and whether it appears on its own or alongside siblings (that may all need to be centred along the same row, or stacked centrally in a column within a container). There are other factors too, so it’s important to get the full picture or it just leaves us guessing.

I think what would be helpful here is if you show us what you’re doing, and explain the context. We can then advise the best approach to take. The most convenient way to do that is to make a demo in CodePen so we can see your own markup and CSS.

[daveharte1]

Hi Beverly, thanks so much for your replay. This is the page I am working on right now, as you can see there are two call to action buttons I would like to center and hyperlink..

http://investestate1.crowdfundhq.com/

[Beverleyh]

A reduced case demo would be easier than poking about in the developer console, which sadly I can’t do as I’m currently on iPad. Unfortunately the linked page provides a stumbling block for me, as it would for other potential helpers who would prefer not to sieve through everything else in your layout.

Pop up a live demo for us using just enough HTML and CSS to demonstrate the problematic elements, and we can make further suggestions. You can use CodePen, or JSBin of JSFiddle, which are great for live edits, and make it much easier for us to help you.

[daveharte1]

Ok, thanks again. I think this is what you mean?

http://codepen.io/dveharte1/pen/VjNqby

[Beverleyh]

Just the 2 buttons will be fine. Giving us everything on your page is just too daunting for us to work through.

That said, here’s a suggestions; put 2 anchors (set as display:inline-block;) in a paragraph tag, and put text-align:center; on that.

[Paulie_D]

Look like you are using the W3Schools CSS Framework so you have a class available to you…

.w3-center {
    text-align: center!important;
}

As Beverley said, slap those buttons (sigh) in a div with that class and it’ll just work.

You have a CSS Framework…I suggest you use it.

[daveharte1]

Guys thanks for your patience. I’m completely new to this so I an unfamiliar with some of your terminology..

http://codepen.io/dveharte1/pen/LkvqVB

[Paulie_D]

You have more than a few errors in your CSS…I’d suggest you validate that

Anyway, as I said, you have a CSS Framework…let it help you, that’s what it’s for…

http://www.w3schools.com/w3css/

http://codepen.io/Paulie-D/pen/QEPYmp

[daveharte1]

Thanks Paulie. Can you show me how to add hyperlinks to each button.. If you could use https://www.google.ie/ as the example and I can replace the link later, please..?

Also, what do you mean when you say I have a css framework, let it help?

Thankfully
David

[Beverleyh]

You can’t add hyperlinks to buttons, not without using JavaScript to recreate that behaviour or having the buttons be part of a form that submits to another page. Too much extra effort. You should just change the button elements to anchors instead and use the href attribute. No point in making life hard by using the wrong tool for the job. Anchors are what link the web. That’s what they’re meant for. http://www.w3schools.com/tags/tag_a.asp

[Paulie_D]

Also, what do you mean when you say I have a css framework, let it help?

If you don’t know…where did you get the CSS from?

[Author]

Posts