英文 | https://niemvuilaptrinh.medium.com/11-social-buttons-for-website-design-a62cf3e143ad
翻譯 | 楊小愛
今天我們将學習在網頁開發中如何制作漂亮的社交媒體按鈕元件。
現在，大多數人使用社交網站來結交朋友、宣傳商業形象、自由分享他們喜歡的東西。
是以，您連結社交網站、您公司的 Facebook 頁面，這是事實。在您的網站上對于人們了解您以及更容易聯系至關重要。
無論您的網站的目的是分享日常故事，銷售，還是分享免費的東西。
您想擁有更多使用者，在谷歌上開發SEO是不夠的，您應該在網站上放置文章分享按鈕，以便使用者可以輕松地分享給其他人，如果他們發現您的文章内容有趣且令人印象深刻的話。
在這裡，我将介紹一些使用 HTML、CSS、Javascript 預先設計的按鈕，以幫助您有多種選擇以适應網站的布局和設計。
01、HTML CSS實作的懸停社交按鈕
示範位址：https://codepen.io/haycuoilennao19/pen/mdeypyK
效果如下：
作者使用了白色背景顔色來比對大多數社交網絡圖示，并使用圓角為按鈕創造了柔和而不僵硬的外觀。它還提供了一個很好的效果，當使用者将滑鼠懸停在該社交網絡上時，該效果會将白色背景顔色更改為該社交網絡的主色。為了更好地了解，請您打開Demo位址進行檢視學習。
02、CSS 動畫社交圖示
示範位址：https://codepen.io/16sidsharma10/pen/jOPWxZL
此按鈕是社交網絡圖示與按鈕背景顔色的移動組合。 它可以幫助您應用到許多不同類型的圖示，并幫助您創造更多的樂趣，提升使用者體驗。 為了更好地了解，請您打開Demo位址進行檢視學習。
03、建立帶有圖示的社交按鈕
示範位址：https://codepen.io/davidpottrell/pen/MYabyp
如果您喜歡簡單，那麼，您可以将這個按鈕進行分解為兩個部分，圖示和社交網絡名稱，以幫助向使用者提供更多資訊。 通過更改圖示顔色以比對按鈕的背景顔色，效果盡可能簡單。
04、CSS 社交按鈕
示範位址：https://codepen.io/codename065/pen/doyRNw
如果您不喜歡通常的方形按鈕，這裡提供圓形按鈕以幫助建立不同且更柔和的感覺。 這裡是為每個單獨的圖示使用适當的顔色以及圖示的多樣性。 為了更好地了解，請您打開Demo位址進行檢視學習。
05、懸停動畫社交媒體按鈕
示範位址：https://codepen.io/cyrzu/pen/XWbjbJE
如果您覺得上面的圓形圖示有點簡單，您可以使用此按鈕建立一個移動效果并根據您網站的主題更改背景顔色。 為了更好的了解，請您打開Demo位址進行檢視學習。
06、 HTML5 CSS3懸停社交按鈕
示範位址：https://codepen.io/Malevolent88/pen/KKwyevV
這個按鈕的設計相當簡單，但特别之處在于按鈕上的懸停效果會激發使用者對網站中使用的每個單獨社交網絡圖示的好奇心。 為了更好地了解，請您打開Demo位址進行檢視學習。
07、CSS圓形按鈕社交圖示
示範位址：https://codepen.io/colorlib/pen/GOzroL
如果您喜歡方形和圓形社交媒體圖示按鈕，那麼當使用者将滑鼠懸停在按鈕上時，它會通過改變形狀來真正滿足您的需求。 我們還可以根據我們的預期用途靈活地将其應用于許多其他圖示。 為了更好地了解，請您打開Demo位址進行檢視學習。
08、3D CSS 社交媒體按鈕
示範位址：https://codepen.io/redstapler/pen/qgNROv
如果您喜歡一些有創意的東西，那麼你可以使用這個按鈕，因為它通過移動 3d 産生效果，感覺全新且富有創意，我們可以添加有關網站的資訊，例如，有多少喜歡數，有多少檢視頁面數等等，為了更好地了解，請您打開Demo位址進行檢視學習。
09、帶有社交按鈕的懸停按鈕效果
示範位址：https://codepen.io/colorlib/pen/QOYpyq
通過更改圖示和邊框顔色以适合您的預期用途，此按鈕可以滿足您對簡單設計的需求，該設計可以應用于許多頁面布局和主題。 為了更好地了解，請您打開Demo位址進行檢視學習。
10、社交按鈕的背景動畫設計
示範位址：https://codepen.io/dsyncerek/pen/zzqpEx
此按鈕呈圓形，具有更改背景顔色以比對其每個社交網絡圖示的效果。 在我看來，設計很簡單，但由于圓形，它比方形按鈕更容易讓使用者專注于圖示。
11、CSS3 動畫社交分享按鈕
示範位址：https://codepen.io/laurenashpole/pen/yOPJMw
按鈕懸停效果集為我們提供了多種按鈕效果可供選擇，以比對我們的網站設計和布局。 為了更好地了解，請您打開示範位址進行檢視學習。
總結
我希望這篇文章能幫助您縮短在網站開發與設計帶有社交網絡圖示的按鈕界面的時間，如果您有任何問題，請在留言區給我留言。
今天内容就到這裡了，感謝您的閱讀，同時，歡迎您給我點贊，評論加關注。
祝您今天愉快！
學習更多技能
請點選下方公衆号