CSS3 expanding links


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



Copy this code and paste it in your HTML
  1. a.read-more {
  2. display: block;
  3. margin: 0 auto;
  4. width: 120px;
  5. padding: 2px 5px;
  6. border: 1px solid #2f2626;
  7.  
  8. background: rgba(237,95,0,0.3);
  9. -moz-transition: all 0.1s ease-in-out;
  10. -webkit-transition: all 0.1s ease-in-out;
  11. -moz-border-radius: 2px;
  12. -webkit-border-radius: 2px;
  13. }
  14. a.read-more:hover {
  15. background: rgba(237,95,0,1.0);
  16. border-color: rgba(237,95,0,1.0);
  17.  
  18. -moz-transform: scale(1.2);
  19. -webkit-transform: scale(1.2);
  20.  
  21. -moz-box-shadow: 0 0 20px black;
  22. -webkit-box-shadow: 0 0 20px black;
  23.  
  24. -moz-border-radius: 10px;
  25. -webkit-border-radius: 10px;
  26. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.