Tất cả bài viết | Bootstrap

Hướng dẫn thiết kế thanh Social Icon cho website

Trong bài học lập trình web này các Bạn sẽ được hướng dẫn Hướng dẫn thiết kế thanh Social Icon cho website

Bước 1: Tạo cấu trúc HTML

 
  
   
   Hướng dẫn thiết kế thanh Social Icon cho website

Bước 1: Tạo cấu trúc CSS

 
ul.social-network {	
list-style: none;	
display: inline;	
margin-left:0 !important;	
padding: 0;
}

ul.social-network li {	
display: inline;	
margin: 0 5px;
}


.social-network a.iconPinterest:hover {	
background-color: #FF0000;
}

.social-network a.icoFacebook:hover {	
background-color:#FF0000;
}

.social-network a.icoTwitter:hover {	
background-color:#FF0000;
}

.social-network a.icoGoogle:hover {	
background-color:#FF0000;
}

.social-network a.icoVimeo:hover {	
background-color:#FF0000;
}

.social-network a.iconYoutube:hover {	
background-color:#FF0000;
}

.social-network a.iconPinterest:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.iconYoutube:hover i {	color:#fff;}

.social-network a.iconPinterest{	background-color:#F56505;}  
.social-network a.icoFacebook  {	background-color:#3B5998;} 
.social-network a.icoTwitter  {	background-color:#33ccff;}
.social-network a.icoGoogle  {	background-color:#BD3518;}

.social-network a.icoVimeo  {	background-color:#0590B8;} 
.social-network a.iconYoutube  {	background-color:#007bb7;}

a.socialIcon:hover, .socialHoverClass {	color:#44BCDD;}

.social-circle li a {	
display:inline-block;	
position:relative;	
margin:0 auto 0 auto;	
-moz-border-radius:50%;	
-webkit-border-radius:50%;	
border-radius:50%;	
text-align:center;	
width: 40px;	
height: 40px;	
font-size:16px;
}

.social-circle li i {	
margin:0;	
line-height:40px;	
text-align: center;
}


.social-circle li a:hover i, .triggeredHover {	
-moz-transform: rotate(360deg);	
-webkit-transform: rotate(360deg);	
-ms--transform: rotate(360deg);	
transform: rotate(360deg);	
-webkit-transition: all 0.2s;	
-moz-transition: all 0.2s;	
-o-transition: all 0.2s;	
-ms-transition: all 0.2s;	
transition: all 0.2s;
}

.social-circle i {	
color: #fff;	
-webkit-transition: all 0.8s;	
-moz-transition: all 0.8s;	
-o-transition: all 0.8s;	
-ms-transition: all 0.8s;	
transition: all 0.8s;
}

Bước 2: Gọi thư viện Bootstrap và Font awesome

Bước 3: Gọi thư viện JQUERY

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất