RSSCSS

Tạo hiệu ứng cho button mạng xã hội

Việc đưa icon mạng xã hội vào website đã trở nên quen thuộc đối với webmaster. Tuy nhiên đa phần icon đó thường không có hiệu ứng bắt mắt, hơi nhàm chán. Hôm nay, Y2Graphic sẽ hướng dẫn việc tạo hiệu ứng cho những icon mạng xã hội này.

Việc đầu tiên là file CSS vào website

<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/reset.css">

Tạo hiệu ứng cho button mạng xã hội

HTML

  
   	<ul class="social">
      <li class="facebook-hover social-slide"></li>
      <li class="twitter-hover social-slide"></li>
      <li class="google-hover social-slide"></li>
      <li class="pinterest-hover social-slide"></li>
      <li class="instagram-hover social-slide"></li>
      <li class="tumblr-hover social-slide"></li>
  </ul>

CSS3

 
.social{
	padding:50px 0px;
	width:350px;
	margin:0 auto;}
	
.social-slide {
	height: 48px;
	width: 48px;
	float: left;
	margin:0px 5px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;}
	
.social-slide:hover {
	background-position: 0px -48px;}
	
.twitter-hover {
	background-image: url(../img/demo1/twitter-hover.png);}
	
.facebook-hover {
	background-image: url(../img/demo1/facebook-hover.png);}
	
.google-hover {
	background-image: url(../img/demo1/google-hover.png);}
	
.pinterest-hover {
	background-image: url(../img/demo1/pinterest-hover.png);}
	
.tumblr-hover {
	background-image: url(../img/demo1/tumblr-hover.png);}
	
.instagram-hover {
	background-image: url(../img/demo1/instagram-hover.png);}

Vậy là chúng ta vừa hoàn tất hiệu ứng thứ nhất. Quá đơn giản phải không mọi người. Tiếp tục đến với hiệu ứng thứ 2 nhé.

Tạo hiệu ứng cho button mạng xã hội

HTML

 
<ul class="wrapper">
  		<li><a class="facebook" href="#"><span class="fb">Facebook</span></a></li>
   		<li><a class="twitter" href="#"><span class="tw">Twitter</span></a></li>
        <li><a class="gplus" href="#"><span class="gl">Google +</span></a></li>
    </ul>

CSS3

 
.wrapper{
    padding: 0;
    width: 330px;
    height: 70px;
    margin: 100px auto}

.wrapper li{
	float: left;}

.wrapper li a{
    display: block;
    width: 68px;
    height: 70px;
    margin: 0px 0px 0px 33px;
    outline: none;
    position: relative;
    z-index: 2;
    background: url('/../img/demo2/img.png') no-repeat;
    text-indent: -9000px;}

.wrapper li .facebook{
	background-position: 0px 0px;}

.wrapper li .twitter{
	background-position: -68px 0px;}

.wrapper li .gplus{
	background-position: -140px 0px;}

Tiếp theo code CSS để tạo hiệu ứng khi rê chuột vào một button.

 
.wrapper li a span{
    width: 80px;
    height: 80px;
    line-height: 80px;
    padding: 10px;
    left: 50%;
    margin-left: -55px;
    font-weight: 700;
    font-size: 14px;
    color: #719DAB;
    text-align: center;
    background:#fff;
    text-indent: 0px;
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    bottom: -40px;
    opacity: 0;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;}

.fb{
	border:5px solid #39599f;}

.tw{
	border:5px solid #45b0e3;}

.gl{
	border:5px solid #333333;}

.wrapper li a:hover span{
    opacity: 1;
    bottom: -15px;
    left:45%;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);}
Nguồn: Y2Graphic

 

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu