Advanced Search

CSS3 expanding links

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

Expand | Embed | Plain Text

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.