Ajax Loader
×
HTML 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
1
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
2
 
3
<div class="type-1">
4
  <div>
5
    <a href="" class="btn btn-1">
6
      <span class="txt">Hover me</span>
7
      <span class="round"><i class="fa fa-chevron-right"></i></span>
8
    </a>
9
  </div>
10
 
11
  <div>
12
    <a href="" class="btn btn-2">
13
      <span class="txt">Hover me</span>
14
      <span class="round"><i class="fa fa-chevron-right"></i></span>
15
    </a>
16
  </div>
17
 
18
  <div>
19
    <a href="" class="btn btn-3">
20
      <span class="txt">Hover me</span>
21
      <span class="round"><i class="fa fa-chevron-right"></i></span>
22
    </a>
23
  </div>
24
</div>
25
26
<div class="type-2">
27
  <div>
28
    <a href="" class="btn btn-1">
29
      <span class="txt">Hover me</span>
30
      <span class="round"><i class="fa fa-chevron-right"></i></span>
31
    </a>
32
  </div>
33
 
34
  <div>
35
    <a href="" class="btn btn-2">
36
      <span class="txt">Hover me</span>
37
      <span class="round"><i class="fa fa-chevron-right"></i></span>
38
    </a>
39
  </div>
40
41
  <div>
42
    <a href="" class="btn btn-3">
43
      <span class="txt">Hover me</span>
44
      <span class="round"><i class="fa fa-chevron-right"></i></span>
45
    </a>
46
  </div>
47
</div>
48
49
<div class="type-3">
50
  <div>
51
    <a href="" class="btn btn-1">
52
      <span class="txt">Hover me</span>
53
      <span class="round"><i class="fa fa-chevron-right"></i></span>
54
    </a>
55
  </div>
56
 
57
  <div>
58
    <a href="" class="btn btn-2">
59
      <span class="txt">Hover me</span>
60
      <span class="round"><i class="fa fa-chevron-right"></i></span>
61
    </a>
62
  </div>
63
64
  <div>
65
    <a href="" class="btn btn-3">
66
      <span class="txt">Hover me</span>
67
      <span class="round"><i class="fa fa-chevron-right"></i></span>
68
    </a>
69
  </div>
70
</div>
 
CSS 
body {
1
body {
2
  margin: 10px;
3
  text-align: center;
4
}
5
body > div {
6
  width: 33%;
7
  float: left;
8
}
9
body > div > div {
10
  margin-bottom: 15px;
11
}
12
 
13
.btn-1 {
14
  background-color: #F27935;
15
}
16
.btn-1 .round {
17
  background-color: #f59965;
18
}
19
 
20
.btn-2 {
21
  background-color: #00AFD1;
22
}
23
.btn-2 .round {
24
  background-color: #00c4eb;
25
}
26
 
27
.btn-3 {
28
  background-color: #5A5B5E;
29
}
30
.btn-3 .round {
31
  background-color: #737478;
32
}
33
 
34
a {
35
  text-decoration: none;
36
  -moz-border-radius: 30px;
37
  -webkit-border-radius: 30px;
38
  border-radius: 30px;
39
  padding: 12px 53px 12px 23px;
40
  color: #fff;
41
  text-transform: uppercase;
42
  font-family: sans-serif;
43
  font-weight: bold;
44
  position: relative;
45
  -moz-transition: all 0.3s;
46
  -o-transition: all 0.3s;
47
  -webkit-transition: all 0.3s;
48
  transition: all 0.3s;
49
  display: inline-block;
50
}
51
a span {
52
  position: relative;
53
  z-index: 3;
54
}
55
a .round {
56
  -moz-border-radius: 50%;
57
  -webkit-border-radius: 50%;
58
  border-radius: 50%;
59
  width: 38px;
60
  height: 38px;
61
  position: absolute;
62
  right: 3px;
63
  top: 3px;
64
  -moz-transition: all 0.3s ease-out;
65
  -o-transition: all 0.3s ease-out;
66
  -webkit-transition: all 0.3s ease-out;
67
  transition: all 0.3s ease-out;
68
  z-index: 2;
69
}
70
a .round i {
71
  position: absolute;
72
  top: 50%;
73
  margin-top: -6px;
74
  left: 50%;
75
  margin-left: -4px;
76
  -moz-transition: all 0.3s;
77
  -o-transition: all 0.3s;
78
  -webkit-transition: all 0.3s;
79
  transition: all 0.3s;
80
}
81
 
82
.txt {
83
  font-size: 14px;
84
  line-height: 1.45;
85
}
86
 
87
.type-1 a:hover {
88
  padding-left: 48px;
89
  padding-right: 28px;
90
}
91
.type-1 a:hover .round {
92
  width: calc(100% - 6px);
93
  -moz-border-radius: 30px;
94
  -webkit-border-radius: 30px;
95
  border-radius: 30px;
96
}
97
.type-1 a:hover .round i {
98
  left: 12%;
99
}
100
 
101
.type-2 a:hover .round {
102
  background: none;
103
}
104
.type-2 a:hover .round i {
105
  left: 70%;
106
}
107
 
108
.type-3 .round {
109
  background: transparent;
110
}
111
.type-3 a {
112
  position: relative;
113
  overflow: hidden;
114
}
115
.type-3 a.btn-1:after {
116
  background-color: #f59965;
117
}
118
.type-3 a.btn-2:after {
119
  background-color: #00c4eb;
120
}
121
.type-3 a.btn-3:after {
122
  background-color: #737478;
123
}
124
.type-3 a:after {
125
  content: "";
126
  -moz-border-radius: 50%;
127
  -webkit-border-radius: 50%;
128
  border-radius: 50%;
129
  width: 37px;
130
  height: 38px;
131
  position: absolute;
132
  right: 3px;
133
  top: 3px;
134
  -moz-transition: all 0.3s ease-out;
135
  -o-transition: all 0.3s ease-out;
136
  -webkit-transition: all 0.3s ease-out;
137
  transition: all 0.3s ease-out;
138
}
139
.type-3 a:hover:after {
140
  right: 100%;
141
  width: 50%;
142
}
143
.type-3 a:hover i {
144
  margin-left: 4px;
145
}
 

Untitled

CSSDeck G+