Posted By

PeteW on 09/22/09


Tagged

form link html button


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

PeteW
vali29
aleksanderek


Make HTML buttons look like links


 / Published in: CSS
 

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.

  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  

You need to login to post a comment.