I am experiencing issues with the functionality of my href link buttons when accessed online

I have successfully created my first website using HTML5 and Javascript, ensuring that all links work perfectly offline. However, after uploading it to the host server, none of the links seem to be working. Can anyone offer some suggestions or advice on what may be causing this issue? Below is an example of how I've coded my link buttons:

<div>
<center>
<button style="margin-top:10px;margin-bottom:10px;height:25px;width:100px;font-size:14px"><a href="hoverB.html">Books</a></button>
</center>
</div>
javascriptcsshtmlhref

Answer №1

You placed an anchor tag within a button element. It seems like you aim to direct the user to another page when they click on the button. You can achieve this with the following methods:

Method 1:

<a href="page.html"><button type="button">Click here</button></a>

Method 2: (Preferred)

<button type="button" onclick="location.href='page.html'">Click here</button>

I trust that this solution will be beneficial for your needs!

Answer №2

Alternatively, you have the option to include an anchor tag styled with CSS to resemble a button

<a href="page.html" class="btn">Click here</a>

.btn:active {
      position: relative;
    top: 1px;
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top, #f47a20, #faa51a);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

.btn{
         display: inline-block;
    zoom: 1;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
        color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top, #faa51a, #f47a20);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

JSFiddle Link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a regex pattern that can accurately extract email addresses from a comma-del

Currently, I have a regular expression that validates a single email address. How can I modify this regex to accept a list of email addresses separated by commas? ^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A- ...

javascriptc#asp.netregexrazor

Exploring the Power of DataList in Angular

I am working with a <datalist> and <select> in the following setup: Updated: Example 1: <input type="text" list="codes" [(ngModel)]="codeValue" (change)="saveCode(codeValue)"> <datalist id="codes"> <option *ngFor="let c of ...

htmlangulartypescripthtml-datalist

Tips for preserving line breaks when sending a message through the mail

Hi, I'm currently facing an issue: I am trying to send text from a textarea using POST to a PHP script that will write it to a file and display it on the website. However, when I do this, the line breaks disappear and the displayed text ends up lookin ...

javascriptphphtmlhttp

What is the best way to use a HTML link to toggle the visibility of a <p> element using

I've been trying to figure out how to make a link show and hide a paragraph below it for some time now. I want to do this using just CSS. The paragraph should be hidden by default, then display when the link is clicked, and hide again with another cl ...

htmlcss

Trouble with Contact Form: PHP failing to display INPUTs

I've been grappling with this issue for a few days now, scouring through countless questions and tutorials. The Contact Form on my website seems to be working—it submits, confirms, and redirects as expected. However, there's one major problem: ...

phphtmlformsemailinput

Finding a way to reference multiple components within a mapping function

In order to set a ref to each project within the map function, I am trying to pass forwardRef from child to parent. At the moment, I am only able to get a single Project. However, I need to set refs to an array list so I can work with it. Below is what I h ...

javascriptreactjstypescript

Sharing information across various web pages

Struggling with PHP as a beginner. Currently using HTML5, CSS3, jQuery, and Bootstrap 4. I have 4 HTML pages on my site. The first page displays 4 squares labeled A, B, C, and D. Users select one square and click "Next" to proceed to page 2. Page 2 must ...

javascriptphpjqueryhtmlajax

What is the reason behind Bootstrap's decision to employ '!important' for its responsive classes?

It's interesting that Bootstrap responsive utilities utilize !important, a practice that I find puzzling. Unlike col-xx-xx, they do not follow the same inheritance pattern. I'm curious about the rationale behind including !important in these clas ...

csstwitter-bootstrap

Maximizing Input Field Utility in React JS

I have a challenge with retrieving values from the input field and passing it to the useEffect. I specifically want the search to be triggered only after pressing the onSearch function. The issue is that I can only capture the value using the onChange func ...

javascriptreactjsreduxmaterial-uiquery-string

Expanding the fields in passport.js local strategy

Passport.js typically only allows for username and password in its middleware as default. I am looking to include a third field in Passport.js. Specifically, I require username, email, and password to be utilized in my case. ...

javascriptnode.jspassport.js

Unsuccessful attempt at testing RequireJS in a straightforward manner

As a beginner in RequireJS, I am currently experimenting to gain some experience. My goal is to make require load basic Angular first and then manually bring in Angular UI Bootstrap. However, I am encountering an issue where UI Bootstrap complains that ang ...

javascriptjqueryangularjsrequirejsangular-ui-bootstrap

Enhance your website with Bootstrap 4 by separating text and images in your carousel

I've been struggling to create a slider similar to the one shown in the image. I attempted using the Bootstrap carousel, but ran into issues with inconsistent image sizes and the text on the left side jumping around before settling in its correct posi ...

cssbootstrap-4carousel

How to make CSS group checkboxes operate autonomously

I found a checkbox code on Codepen that I really liked, but encountered an issue when trying to use multiple checkboxes at once. Despite customizing it to my preferences, each checkbox only works independently and does not function properly when there are ...

htmlcss

Manipulate objects within an array by updating state with a button in React

So, I have an array of names that I want to cycle through: const data = { names: [ { name: "Jordan" // additional data }, { name: "Holly" // additional data }, { name: "Sean" // additional data ...

javascriptarraysreactjsreact-hooks

Make sure that the function displays the output once it has been received using the jQuery.get method

This script fetches data using the $.get method from an XML file on an ASP ashx server: $.get("http://www.example.com/example.ashx", { From: txtFrom, To: txtTo, Date: txtTime }, function (data) { var arr ...

javascriptjqueryajaxget

What is the top choice for creating a cutting-edge front-end web module?

Which generator or scaffold is recommended for creating a contemporary front-end web module using npm/webpack? ...

javascriptnpmwebpack

Struggling to align a div container in the center

I'm having trouble centering my main container on the page. No matter what I try, it still seems to be floating to the left... I'm wrapping all my content in its own Div because I'm using a jQuery cycle background and I want to keep my conte ...

jqueryhtmlcsscontainerscenter

Guide on Updating the ColModel Dynamically in JAVASCRIPT/HTML using clearGridData, setGridParam, and reloadGrid Functions

I am trying to figure out how to dynamically change the colmodel of my grid using a function that is called by a SELECT. The reason for this is because my grid has different periods and needs to display either cost or tons based on user selection. Below i ...

javascripthtmljsonjqgridreload

Is it possible to create and access a PDF file using file handling in PHP?

In my PHP code, I am utilizing file handling to write and then read a PDF file. However, after successfully creating the PDF file, I encounter an issue where I am unable to open it. When attempting to open the file, Adobe Reader displays an error message s ...

phphtml

Clicking on an element in the Dropdown Form will directly redirect you to a link, without the need to press a

I'm having trouble with my dropdown form. I want the user to be directed to a specific URL when they click on an element, without needing to hit a submit button. Below is the code I've been working with: <select name="mydropdown" class="style ...

htmlforms