I am trying to make my buttons clickable so I have a link to a website using h ref and button elements

Question

I want my buttons to link to the actual websites I created: for example Joeys Auto

My portfolio website is: http://loriroberg.com/cssfinalproject/index.html#home It has a button for JOEYS AUTO. The website for Joeys Auto is http://loriroberg.com/final/index.html

How do I change this code:

<div class="w3-col m3"><button class="button4 w3-button w3-padding-large w3-light-grey" style="margin-top:64px">Joeys Auto</button></div>

So that it will link up to JOEYS AUTO?

The following code is under MY PROJECTS section of my portfolio.

<h3 class="w3-center">MY PROJECTS</h3>

<p class="w3-center"><em>Here are some of the projects I completed.<br />
I will post more soon.<br />
Click on the links to view them on the web.</em></p>
<br />
<!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
<div class="w3-row-padding w3-center">


<div class="w3-col m3"><button class="button4 w3-button w3-padding-large w3-light-grey" style="margin-top:64px">Joeys Auto</button></div>

<div class="w3-col m3"><button class="button4 w3-button w3-padding-large w3-light-grey" style="margin-top:64px">CSS3 2D Animation</button></div>


<div class="w3-col m3"><button class="button4 w3-button w3-padding-large w3-light-grey" style="margin-top:64px">CSS3 Animation</button></div>

<div class="w3-col m3"><button class="button4 w3-button w3-padding-large w3-light-grey" style="margin-top:64px">CSS3 3D Animation</button></div>
<!--<button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE</button>

score 0 · Answer 1 · answered Jul 02 '19 at 17:15

0

For linking to other sites (e.g. linking to an external site from your portfolio) ,you'll want to use HTML anchor tags. You can use the following link:

<a href="http://example.com">Joey's Auto</a>

If you are already on loriroberg.com, you can also use a relative URL:

<a href="/final/index.html">Joey's Auto</a>

That will take you to http://loriroberg.com/final/index.html. You can find more info on relative vs. absolute URLs in this StackOverflow question

answered Jul 02 '19 at 17:15

ldtcoop

680
4
14

– Lori Jul 02 '19 at 17:55
I should have been more clear. You should be using the anchor tags (``) **instead** of the button tags for navigation. If you want to make the anchor tags look like buttons, you can style them with CSS or with `style` attributes (what you are using, the `style="margin-top:64px"`). You'll want to get rid of all the button tags and just use the anchor tags like I laid out in my answer. – ldtcoop Jul 02 '19 at 18:17
I appreciate all your help. I will take your advice because it works. Thank you. – Lori Jul 02 '19 at 20:11
If that solved your problem, then would you mind making that the accepted answer? There should be a check mark next to my answer that you can click to accept it. – ldtcoop Jul 02 '19 at 20:56

I am trying to make my buttons clickable so I have a link to a website using h ref and button elements

1 Answers1