Ajax Loader
×

Untitled

HTML 
<body>
1
<body>
2
  <svg display="none"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="160" height="40" viewBox="0 0 160 40">
3
<defs>
4
<g id="icon-twitter">
5
  <path d="M20 0.8c-10.604 0-19.2 8.596-19.2 19.2s8.596 19.2 19.2 19.2 19.2-8.596 19.2-19.2-8.596-19.2-19.2-19.2zM27.808 16.53c0.008 0.162 0.012 0.326 0.012 0.49 0 4.996-3.804 10.758-10.76 10.758-2.134 0-4.124-0.624-5.796-1.7 0.296 0.036 0.598 0.052 0.902 0.052 1.772 0 3.402-0.604 4.698-1.62-1.654-0.030-3.052-1.124-3.534-2.624 0.23 0.044 0.468 0.068 0.71 0.068 0.346 0 0.68-0.046 0.996-0.132-1.728-0.348-3.034-1.876-3.034-3.708 0-0.016 0-0.032 0.002-0.046 0.51 0.282 1.094 0.452 1.712 0.472-1.012-0.678-1.68-1.834-1.68-3.148 0-0.694 0.186-1.344 0.512-1.902 1.864 2.29 4.652 3.796 7.794 3.952-0.064-0.276-0.098-0.564-0.098-0.862 0-2.088 1.694-3.782 3.782-3.782 1.088 0 2.070 0.458 2.76 1.194 0.862-0.168 1.672-0.482 2.402-0.916-0.284 0.882-0.882 1.624-1.664 2.092 0.766-0.092 1.494-0.294 2.172-0.596-0.506 0.758-1.15 1.424-1.888 1.958z"></path>
6
</g>
7
<g id="icon-facebook">
8
  <path d="M20 0.8c-10.604 0-19.2 8.596-19.2 19.2s8.596 19.2 19.2 19.2 19.2-8.596 19.2-19.2-8.596-19.2-19.2-19.2zM24.546 14.068h-2.886c-0.34 0-0.72 0.45-0.72 1.048v2.084h3.608v2.972h-3.608v8.922h-3.408v-8.922h-3.088v-2.97h3.088v-1.748c0-2.508 1.74-4.546 4.128-4.546h2.886v3.16z"></path>
9
</g>
10
<g id="icon-googleplus">
11
  <path d="M18.194 14.57c-0.482-1.7-1.262-2.202-2.476-2.202-0.13 0-0.262 0.018-0.388 0.052-0.528 0.15-0.944 0.59-1.176 1.24-0.238 0.66-0.254 1.35-0.046 2.134 0.368 1.4 1.364 2.418 2.37 2.418 0.13 0 0.262-0.018 0.388-0.052 1.094-0.31 1.782-1.986 1.328-3.59zM20 0.8c-10.604 0-19.2 8.596-19.2 19.2s8.596 19.2 19.2 19.2c10.606 0 19.2-8.596 19.2-19.2s-8.594-19.2-19.2-19.2zM18.894 28.244c-1.208 0.586-2.506 0.648-3.008 0.648-0.096 0-0.15-0.002-0.158-0.002 0 0-0.038 0-0.098 0-0.784 0-4.686-0.18-4.686-3.734 0-3.492 4.248-3.764 5.55-3.764h0.036c-0.75-1.004-0.594-2.016-0.594-2.016-0.066 0.004-0.164 0.008-0.282 0.008-0.492 0-1.438-0.078-2.25-0.604-0.994-0.638-1.498-1.728-1.498-3.238 0-4.262 4.652-4.434 4.7-4.436h4.646v0.102c0 0.52-0.932 0.62-1.57 0.708-0.216 0.030-0.648 0.074-0.772 0.136 1.178 0.628 1.368 1.618 1.368 3.090 0 1.674-0.656 2.56-1.352 3.184-0.43 0.384-0.77 0.69-0.77 1.094 0 0.396 0.464 0.804 1.004 1.278 0.882 0.776 2.092 1.838 2.092 3.622 0 1.844-0.794 3.164-2.358 3.924zM29.054 19.982h-3.032v3.032h-1.92v-3.032h-3.032v-1.92h3.032v-3.030h1.92v3.032h3.032v1.918zM16.446 22.302c-0.104 0-0.208 0.004-0.312 0.012-0.888 0.064-1.708 0.398-2.302 0.938-0.588 0.532-0.886 1.202-0.844 1.882 0.088 1.42 1.616 2.254 3.468 2.12 1.826-0.132 3.042-1.182 2.952-2.604-0.086-1.338-1.248-2.348-2.962-2.348z"></path>
12
</g>
13
<g id="icon-vk">
14
  <path d="M22.070 21.962c-0.616-0.358-1.47-0.358-2.166-0.358h-2.282v4.704h2.096c0.776 0 1.764 0.054 2.432-0.414 0.616-0.414 0.962-1.224 0.962-1.996 0-0.718-0.428-1.576-1.042-1.936zM21.208 17.948c0.508-0.386 0.774-1.078 0.774-1.712 0-0.69-0.32-1.352-0.906-1.71-0.616-0.358-1.738-0.276-2.46-0.276h-0.994v4.14h1.314c0.75-0.002 1.632 0.054 2.272-0.442zM32.45 0.8h-24.902c-3.726 0-6.748 3.022-6.748 6.75v24.898c0 3.728 3.022 6.75 6.748 6.75h24.9c3.728 0 6.75-3.022 6.75-6.75v-24.898c0.002-3.728-3.020-6.75-6.748-6.75zM21.042 29.814h-7.844v-18.934h8.57c2.482 0 4.774 1.58 4.774 4.368 0 2.152-1.202 3.626-2.734 4.086v0.054c2.274 0.468 3.896 1.704 3.896 4.682 0 2.756-1.878 5.744-6.662 5.744z"></path>
15
</g>
16
</defs></svg>
17
  <nav>
18
    <ul>
19
      <li>
20
        <a href="#">
21
          <svg class="icon icon-facebook" viewBox="0 0 40 40"><use xlink:href="#icon-facebook"></use></svg>
22
        </a>
23
      </li>
24
      <li>
25
        <a href="#">
26
          <svg class="icon icon-twitter" viewBox="0 0 40 40"><use xlink:href="#icon-twitter"></use></svg>
27
        </a>
28
      </li>
29
      <li>
30
        <a href="#">
31
          <svg class="icon icon-googleplus" viewBox="0 0 40 40"><use xlink:href="#icon-googleplus"></use></svg>
32
          </a>
33
      </li>
34
      <li>
35
        <a href="#">
36
          <svg class="icon icon-vk" viewBox="0 0 40 40"><use xlink:href="#icon-vk"></use></svg>
37
          </a>
38
      </li>
39
    </ul>
40
  </nav>
41
</body>
 
CSS 
ul {
1
ul {
2
  width: 400px;
3
  margin: 200px auto;
4
  padding: 0;
5
  list-style: none;
6
}
7
 
8
ul li {
9
  float: left;
10
}
11
 
12
ul li a {
13
  display: block;
14
  width: 40px;
15
  height: 40px;
16
  margin-right: 20px;
17
}
18
 
19
.icon {
20
  display: inline-block;
21
  width: 40px;
22
  height: 40px;
23
  fill: #000;
24
  opacity: .3;
25
}
26
 
27
ul li:hover .icon {
28
  opacity: 1;
29
  -webkit-transition: .2s ease-in-out;
30
  -o-transition: .2s ease-in-out;
31
  transition: .2s ease-in-out;
32
}
33
 
34
ul li:hover .icon-twitter {
35
  fill: #49C1ED;
36
}
37
 
38
ul li:hover .icon-facebook {
39
  fill: #3D5998;
40
}
41
 
42
ul li:hover .icon-googleplus {
43
  fill: #D94835;
44
}
45
 
46
ul li:hover .icon-vk {
47
  fill: #587FA8;
48
}
 

Untitled

CSSDeck G+