Advanced Search

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.

Expand | Embed | Plain Text

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.