Make HTML buttons look like links


/ Published in: CSS
Save to your folder(s)

Summarised snippet of Natbat's article: http://natbat.net/2009/Jun/10/styling-buttons-as-links/

Any link that that initiates an action, rather than just changing a page should semantically be a form with a submit button not a l ink. However you can still make the button look like a link.


Copy this code and paste it in your HTML
  1. <style>
  2. button.link {
  3. -moz-user-select: text;
  4. background: none;
  5. border: none;
  6. color: blue;
  7. cursor: pointer;
  8. font-size: 1em;
  9. margin: 0;
  10. padding: 0;
  11. text-align: left;
  12. }
  13.  
  14. button.link:hover span {
  15. text-decoration: underline;
  16. }
  17. </style>
  18.  
  19. <form action="" method="post">
  20. <button type="submit" class="link"><span>Delete</span></button>
  21. </form>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.