如何使用該代碼片段繞過社交媒體按鈕？

Question

我有以下代碼來創建社交媒體按鈕。我在側邊欄的wordpress博客中使用它們。

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); 
 

 
/* General rule */ 
 

 
.dist { 
 
    margin-left: 7px; 
 
} 
 
.button-big { 
 
    font-size: 2em; 
 
    width: 50px; 
 
    text-align: center; 
 
    padding: 0.2em 0em 0.2em 0em; 
 
    display: inline-block; 
 
} 
 
/* Facebook class and animation */ 
 

 
.facebook { 
 
    color: #3B5998; 
 
    border: 1px solid #3B5998; 
 
} 
 
.facebook:hover { 
 
    animation: facebookAnim 0.4s normal forwards linear; 
 
    -webkit-animation: facebookAnim 0.4s normal forwards linear; 
 
} 
 
@keyframes facebookAnim { 
 
    50% { 
 
    background-color: #3B5998; 
 
    } 
 
    100% { 
 
    background-color: #3B5998; 
 
    border: 1px solid #3B5998; 
 
    color: #fff; 
 
    } 
 
} 
 
@-webkit-keyframes facebookAnim { 
 
    50% { 
 
    background-color: #3B5998; 
 
    } 
 
    100% { 
 
    background-color: #3B5998; 
 
    border: 1px solid #3B5998; 
 
    color: #fff; 
 
    } 
 
} 
 
/* YouTube class and animation */ 
 

 
.youtube { 
 
    color: #bb0000; 
 
    border: 1px solid #bb0000; 
 
} 
 
.youtube:hover { 
 
    animation: ytAnim 0.4s normal forwards linear; 
 
    -webkit-animation: ytAnim 0.4s normal forwards linear; 
 
} 
 
@keyframes ytAnim { 
 
    50% { 
 
    background-color: #bb0000; 
 
    } 
 
    100% { 
 
    background-color: #bb0000; 
 
    border: 1px solid #bb0000; 
 
    color: #fff; 
 
    } 
 
} 
 
@-webkit-keyframes ytAnim { 
 
    50% { 
 
    background-color: #bb0000; 
 
    } 
 
    100% { 
 
    background-color: #bb0000; 
 
    border: 1px solid #bb0000; 
 
    color: #fff; 
 
    } 
 
} 
 
/* Instagram class and animation */ 
 

 
.instagram { 
 
    color: #125688; 
 
    border: 1px solid #125688; 
 
} 
 
.instagram:hover { 
 
    animation: instaAnim 0.4s normal forwards linear; 
 
    -webkit-animation: instaAnim 0.4s normal forwards linear; 
 
} 
 
@-webkit-keyframes instaAnim { 
 
    50% { 
 
    background-color: #125688; 
 
    } 
 
    100% { 
 
    background-color: #125688; 
 
    border: 1px solid #125688; 
 
    color: #fff; 
 
    } 
 
} 
 
@keyframes instaAnim { 
 
    50% { 
 
    background-color: #125688; 
 
    } 
 
    100% { 
 
    background-color: #125688; 
 
    border: 1px solid #125688; 
 
    color: #fff; 
 
    } 
 
} 
 
/* link styles */ 
 

 
.facebook a { 
 
    color: #3B5998; 
 
} 
 
.youtube a { 
 
    color: #bb0000; 
 
} 
 
.instagram a { 
 
    color: #125688; 
 
} 
 
.facebook a:hover { 
 
    color: #fff; 
 
} 
 
.youtube a:hover { 
 
    color: #fff; 
 
} 
 
.instagram a:hover { 
 
    color: #fff; 
 
}

<a href="#"> 
 
<div class="facebook button-big"> 
 
<i class="fa fa-facebook"></i> 
 
</div></a> 
 
<a href="#"><div class="youtube button-big dist"> 
 
<i class="fa fa-youtube"></i> 
 
</div></a> 
 

 
<a href="#"><div class="instagram button-big dist"> 
 
<i class="fa fa-instagram"></i> 
 
</div></a>

有誰知道如何讓他們過來呢？我認爲那看起來好多了！我嘗試了不同的東西，但沒有爲我工作！如果有人能幫助我，那將是非常棒的！

謝謝！

Answer 1

添加border-radius: 50%;這個CSS類的button-big

Answer 2

我明白了，border-radius: 50%;就是解決方案。 但謝謝你！