Advertisement
austinh115

[CSS] Some sick hover effects stolen from xat.me/Sydney

May 24th, 2017
210
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 0.86 KB | None | 0 0
  1.             #ms_05 {
  2.                 margin: 0 5px 5px;
  3.                 text-align: center;
  4.             }
  5.  
  6.             #ms05 a {
  7.                 position: relative;
  8.                 display: inline-block;
  9.                 margin: 5px;
  10.                 padding: 5px 8px;
  11.                 background: #fafafe;
  12.                 overflow: hidden;
  13.                 border: 1px solid #fafafe;
  14.             }
  15.  
  16.             #ms05 a:after {
  17.                 content: '';
  18.                 position: absolute;
  19.                 width: 100%;
  20.                 height: 100%;
  21.                 top: 0px;
  22.                 left: -100%;
  23.                 background: #586aac;
  24.             }
  25.  
  26.             #ms05 a:hover {
  27.                 color: #586aac;
  28.                 border: 1px solid #586aac;
  29.             }
  30.  
  31.             #ms05 a:hover:after {
  32.                 left: 110%;
  33.             }
  34. #ms05 a:after, #ms05 a {
  35.     transition: all 0.6s ease-in-out 0s;
  36.     -moz-transition: all 0.6s ease-in-out 0s;
  37.     -webkit-transition: all 0.6s ease-in-out 0s;
  38.     -o-transition: all 0.6s ease-in-out 0s;
  39. }
  40.  
  41. .ma a {
  42.     color: #3e3e3e;
  43.     background: #fafafe;
  44.     text-decoration: none;
  45.     font-style: italic;
  46.     padding: 0 2px;
  47. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement