Ajax Loader
HTML 
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
1
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
2
 
3
<a href="#" class="btn effect-1">M</a>
 
CSS 
// Basic Round Button Layout
1
// Basic Round Button Layout
2
a {
3
  color: white;
4
  text-decoration: none;
5
  font-size: 40px;
6
}
7
.effect-1 {
8
  position: relative;
9
  height: 100px;
10
  width: 100px;
11
  margin: 100px;
12
  @include border-radius(50%);
13
  display: block;
14
  text-align: center;
15
  line-height: 100px;
16
  font-family: 'Monoton', cursive;
17
  background-color: black;
18
  -webkit-transform: translateZ(0);
19
20
  &:hover {
21
    background-color: rgba(0,0,0,0.8);
22
    @include transition(background-color 0.2s);
23
  
24
    &:after {
25
      @include scale(1);
26
      @include transition(transform 0.2s);
27
    }
28
  }
29
}
30
 
31
.effect-1:after {
32
  position: absolute;
33
  top:-10px;
34
  left: -10px;
35
  content: '';
36
  height: 100%;
37
  width: 100%;
38
  padding: 10px;
39
  @include border-radius(50%);
40
  @include box-shadow(0 0 0 5px rgba(0,0,0,0.8));
41
  @include scale(0.7);
42
  @include transition(transform 0.2s);
43
}
44
 
45
 
 

CSS3 Hover Transitions

CSSDeck G+