Create HTML button that looks like a href hyperlink


If you want to create an HTML button that behaves like an HTML hyperlink (anchor tag a href) then you need to make use of CSS code to make the button look like a hyperlink, lets seem some examples,

Plain HTML button:

Code for the plain button:
<button type="submit" title="This is a button">myButton</button>

As you see this is just a default looking HTML button, the rendering of this button would vary based on the operating system and the browser you are using, now lets add some CSS code make this button look like a hyperlink.

Plain HTML button as link:

Code for plain HTML button as link:
<button class="linkCss" title="This is a button that looks like an hyperlink" type="submit">Button as a link</button>

<style>
.linkCss {
  background: none;
  border: none;
  color: #0064bd;
  cursor: pointer;
  text-decoration: underline;
 }
</style>
How did we made the button look like a link using CSS properties:
  1. Set background as none
  2. Set border as none
  3. Choose a color, mostly blue that looks like a hyperlink say #0064bd
  4. Now when you hover over the text we should be able to see the pointer so user cursor: pointer
  5. Now we want a underscore, use text-decoration: underline
Copyright © Code2care 2024 | Privacy Policy | About Us | Contact Us | Sitemap