Красивое оформление ссылки в ввиде таблички с тенью, для Блогспот, Blogger

Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)

Только что оформил по новому наведенные ссылки и очень рад эффекту! А что бы нововведение стало достоянием общественности, сразу же публикую код и способ установки.  © blogodel.com
Не могу не упомянуть источник идеи - автора замечательного блога и популяризатора платформы Блогспот, Blogger: MagentaWAVE

http://www.magentawave.com/

Если вам понравился эффект и вы решили это внедрить у себя, то установка очень проста. Добавьте нижеприведенный код в: Дизайн - Добавить гаджет - HTML/JavaScript

<style>a {display: inline-block;  
        padding: 2px;  
        outline: 0;  
         border: 1px solid transparent; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px; -webkit-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; -moz-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; -o-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; 
}  
a:hover {  
         background: #e8e8e8; border: 1px solid #999999; text-decoration: none; text-shadow: none; -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); -webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); } 
 } 
  </style>

Красная маркировка - цвет заднего фона таблички, зеленая - цвет рамки.

Если вы решили оставить такой эффект надолго и у вас уже есть опыт работы с шаблоном Блоггер, Blogspot, то удаляете  предыдущий код с гаджетом и перед ]]></b:skin> добавляете:

a {display: inline-block;  
        padding: 2px;  
        outline: 0;  
         border: 1px solid transparent; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px; -webkit-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; -moz-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; -o-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; 
}  
a:hover {  
         background: #e8e8e8; border: 1px solid #999999; text-decoration: none; text-shadow: none; -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); -webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); } 
 } 

  © blogodel.com 

Апдейт: Не удержался и модифицировал код. Теперь еще и цвет, автоматически меняется у таблички! Красная маркировка это цвет, который можно поменять.   

<style>a {display: inline-block;  
        padding: 2px;  
        outline: 0;  
         border: 1px solid transparent; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px; -webkit-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; -moz-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; -o-transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; transition: box-shadow 0.7s ease, background 0.7s ease, border 0.7s ease; 
}  
a:hover {  
border: 1px solid #999999; text-decoration: none; text-shadow: none; -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); -webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5); 
background:#e8e8e8;
  -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
  -moz-animation: animaciy9 2s ease-in-out 1s infinite alternate;
  -webkit-animation: animaciy9 2s ease-in-out 1s infinite alternate;
  -ms-animation: animaciy9 2s ease-in-out 1s infinite alternate;}

@-moz-keyframes animaciy9 {   
  from { background-color: #e8e8e8;}  
  to { background-color: #ffff00;} 
}


@-webkit-keyframes animaciy9 {
  from { background-color: #e8e8e8;}
  to { background-color: #ffff00;}
}

@-ms-keyframes animaciy9 {
  from { background-color: #e8e8e8;}
  to { background-color: #ffff00;}}


  </style>