A clickable call link is usually utilized by service-based websites. With the help of this HTML element, users are prevented from wasting time by writing a phone number on their phones from the website. They only need to click the link and call the service. More specifically, an HTML <a> tag can be utilized with the href=tel attribute to make a clickable call link.

This manual will provide a procedure for making a clickable call link in HTML.

How to Make a Clickable Call Link Using HTML?

In HTML, first, add an <div> element with the attribute class “phone-call”. Then, inside this div element, add <a> tag to insert the phone number. In such a scenario, the attribute href specifies the call link. This link is created by adding the tel keyword, colon, and number in inverted commas, as given in the below code block.

HTML

 
By providing the above HTML code, the browser displays the following result:

It can be seen from the above-provided GIF that the clickable call link has been successfully created.

How to Apply CSS Styles to Clickable Call Link?

In this section, CSS properties will be applied to the added HTML elements.

Style body element

 
The body element of HTML is applied with the “background-color” as “#CD104D”.

Style phone-call div

 
Apply styles to the phone-call div with CSS properties as follows:

• • “text-align” property provides the alignment to the div text.
  • “margin” property is set with a value of 100px auto, where the first value specifies space at the top and bottom, and the second value specifies equal space at the left and right of the element.

Style “a” Tag of phone-call div

 
The anchor tag used within the div phone-call is applied with the CSS properties that are explained below:

• • “color” property specifies the font color.
  • “background-color” property applies color to the element’s background.
  • “padding” property specifies the space around the element’s content.
  • “border-radius” property makes the element’s edges round.
  • “text-decoration” property is set with the value none to remove the button’s underline.
  • “font-size” property is utilized for the setting of the font’s size.
  • “font-family” is set with values Verdana, Geneva, Tahoma, sans-serif. This list is provided to make sure if the browser does not support the first one, the other will be applied.

Save the above-mentioned code and open it in the browser. The output screen will look like this:

That’s how we can make a clickable call link using HTML.

Conclusion

To make a clickable call link, an HTML <a> tag can be utilized, where the href attribute of the <a> tag is utilized for adding a link. Moreover, within the href attribute, the tel keyword and phone number are specified. This article demonstrated the method to make a clickable call link in HTML with a practical example.