How to Make any HTML Element Clickable

In this article, we show how to make any HTML element clickable.

This means that whenever you hover over the element with your mouse, the pointer cursor will be shown.

There are actually a few ways of doing this for most elements. For other elements, there is only one proven way to make an element clickable.

So the best and most pure way to make an HTML element clickable is with CSS (cascading style sheets).

You give an element a unique identifier and with CSS code target that element and add in the following line shown below.

cursor:pointer;

What the line, cursor:pointer, does is will turn the mouse into a pointer when hovering over the selected element.

As an example, let's make the image below clickable.

How to Make an HTML Image Clickable

Let's say we have the following image shown below.

We give this element an id attribute of "shrek".

Within our css file, to make this image clickable, we have the following code shown below.

#shrek { cursor:pointer; }

Now, with CSS, we have made this image clickable.

Another way of making an image clickable is by placing anhcor tags around an image. If you don't want the anchor tag to actually redirect off the path, you either have to give it an href of "#" or you have to add AJAX code and prevent the default action of going to another page.

This works but it's not as pure as simply doing this in CSS code.

But this will work for most elements, but still not all.

How to Make an HTML Button Clickable

To make an HTML button clickable, you cannot use anchor tags around the button. This will not work. Even though the anchor tag method works with most HTML elements, it doesn't work for buttons. With buttons, the only way to make them clickable to to add the CSS cursor:pointer line to that element.

The following button below is clickable with CSS code.

Select

The code for this select button is shown below.

<button id="selectbutton">Select </button>

To make this select button clickable, the following CSS code is used below.

#selectbutton { cursor:pointer; }

So, in recap, you can use anchor tags surrounding HTML elements to make most HTML elements clickable or you can do so in CSS code with the cursor:pointer line.

And this is how to make HTML elements clickable.

Related Resources

How to Embed an Image in an HTML Page

How to Create Links to Within the Same Page in HTML

How to Create a Popup Title When a User Hovers Over a Link in HTML

How to Create a Definition List in HTML

How to Create a Table in HTML

How to Create a Table with Rows of Alternating Colors Using HTML and CSS

How to Add a Class or ID to an Anchor Tag in HTML

How to Change the Name of a Submit Button in HTML

How to Create a Reset Button in HTML

How to Create a Text Box that a User Cannot Type Inside Of

How to Create a List Box in HTML

How to Create a Multi-line Text Input (Textarea) in HTML

How to create a drop down list in HTML

How to Play an Audio File Using HTML

How to Display a Video Using HTML