Kinh nghiệmSeries hướng dẫn

Hướng dẫn tạo nút chia sẻ sử dụng HTML và CSS cực chất và đẹp cho website

Trong bài viết này mình sẽ hướng dẫn tạo nút chia sẻ, nút liện hệ hay nút thông tin mạng xã hội cá nhân, mình sẽ để code HTML của cả button chia sẻ và thông tin mạng xã hội cá nhân cho bạn nào không biết sửa nhé!

Hướng dẫn tạo nút chia sẻ sử dụng HTML và CSS cực chất và đẹp cho website

Hướng dẫn

Bước 1: Thêm đoạn code CSS sau đây vào trong theme của bạn thường nằm giữ cặp thẻ <head>...</head>.

<style>
 	.social-container{position:fixed;height:50px;width:50px;border-radius:40px;background-color:var(--widgetbg);bottom:30px;left:30px;box-shadow:0 12px 25px 0 rgb(30 30 30 / 4%);transition:0.3s ease, box-shadow 0.1s 0.3s ease;z-index:5}
	.social-check-label{z-index:10;cursor:pointer;position:absolute;height:50px;width:50px;bottom:0;left:50%;transform: translateX(-50%) rotate(0deg);border-radius:100%;transition:0.3s ease}
	.social-check-label:after,.social-check-label:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:4px;width:35%;border-radius:2px;background-color:#7577a9}
	.social-check-label:after{transform: translate(-50%,-50%) rotate(90deg)}
	.social-button{position:absolute;height:45px;width:45px;left:50%;transform: translate(-50%,-50%) scale(0.75);transition:0.3s ease, opacity 0.1s ease;background-size:cover!important;backface-visibility:hidden;opacity:0}
	.social-button > span{z-index:3;position:absolute;left:-100%;background:#fff;border-radius:100px;top:50%;transform:translateY(-50%);white-space:nowrap;box-shadow:0 12px 25px 0 rgb(30 30 30 / 4%);padding:8.25px 15px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;transition:all 0.2s ease-in-out}
	.social-button:hover > span{left:calc(100% + 18.25px);opacity:1}
	.social-button.facebook{top:169.5px;background:url("https://cdn.jsdelivr.net/gh/ngylduy/images/facebook-icon.png") no-repeat center}
	.social-button.twitter{top:169.5px;background:url("https://cdn.jsdelivr.net/gh/ngylduy/images/twitter-icon.png") no-repeat center}
	.social-button.pinterest{top:169.5px;background:url("https://cdn.jsdelivr.net/gh/ngylduy/images/pinterest-icon.png") no-repeat center}
	.social-button.linkedin{top:169.5px;background:url("https://cdn.jsdelivr.net/gh/ngylduy/images/linkedin-icon.png") no-repeat center}
	#socialcheckbox{display:none}
	#socialcheckbox:checked~ .social-container{height:219.5px;transition:0.3s ease, box-shadow 0.1s ease}
	#socialcheckbox:checked~ .social-container > .social-button{opacity:1;cursor:pointer}
	#socialcheckbox:checked~ .social-container > .social-button.facebook{top:25px;transition:0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier(0,0,0.5,1.6)}
	#socialcheckbox:checked~ .social-container > .social-button.twitter{top:61.75px;transition:0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier(0,0,0.5,1.6)}
	#socialcheckbox:checked~ .social-container > .social-button.pinterest{top:99.25px;transition:0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier(0,0,0.5,1.6)}
	#socialcheckbox:checked~ .social-container > .social-button.linkedin{top:137.25px;transition:0.3s ease, opacity 0.33s 0.455s ease, top 0.33s 0.405s cubic-bezier(0,0,0.5,1.6)}
	#socialcheckbox:checked~ .social-container > .social-check-label{transform:translateX(-50%) rotate(225deg)}
</style>

Bước 2: Thêm đoạn HTML sau vào trước thẻ đóng </body>

Nếu bạn dùng làm nút chia sẻ cho trang đang truy cập thì dùng code dưới đây:

<input id='socialcheckbox' type='checkbox' />
<div class='social-container'>
	<a class='social-button facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:view.url.canonical' rel='nofollow noopener' target='_blank'><span>Chia sẻ lên Facebook</span></a>
	<a class='social-button twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:view.url.canonical' rel='nofollow noopener' target='_blank'><span>Chia sẻ lên Twitter</span></a>
	<a class='social-button pinterest' expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:view.url.canonical' rel='nofollow noopener' target='_blank'><span>Chia sẻ lên Pinterset</span></a>
	<a class='social-button linkedin' expr:href='&quot;https://www.linkedin.com/sharing/share-offsite/?url=&quot; + data:view.url.canonical' rel='nofollow noopener' target='_blank'><span>Chia sẻ lên Linkedin</span></a>
	<label class='social-check-label' for='socialcheckbox' />
</div>

Nếu bạn dùng làm nút liên kết đến trang thông tin mạng xã hội cá nhân thì dùng code dưới đây:

<input id='socialcheckbox' type='checkbox' />
<div class='social-container'>
	<a class='social-button facebook' href='#' rel='nofollow noopener' target='_blank'><span>Theo dõi Facebook tác giả</span></a>
	<a class='social-button twitter' href='#' rel='nofollow noopener' target='_blank'><span>Theo dõi Twitter tác giả</span></a>
	<a class='social-button pinterest' href='#' rel='nofollow noopener' target='_blank'><span>Theo dõi Pinterset tác giả</span></a>
	<a class='social-button linkedin' href='#' rel='nofollow noopener' target='_blank'><span>Theo dõi Linkedin tác giả</span></a>
	<label class='social-check-label' for='socialcheckbox' />
</div>

Lưu ý: Nếu bạn dùng làm nút liên kết thông tin mạng xã hội cá nhân các bạn nhớ thay đường dẫn trong thuộc tính href nhé!

Ví dụ:

<input id='socialcheckbox' type='checkbox' />
<div class='social-container'>
	<a class='social-button facebook' href='https://www.facebook.com/THIENDZ.VN/' rel='nofollow noopener' target='_blank'><span>Theo dõi Facebook tác giả</span></a>
	<a class='social-button twitter' href='#' rel='nofollow noopener' target='_blank'><span>Theo dõi Twitter tác giả</span></a>
	<a class='social-button pinterest' href='#' rel='nofollow noopener' target='_blank'><span>Theo dõi Pinterset tác giả</span></a>
	<a class='social-button linkedin' href='#' rel='nofollow noopener' target='_blank'><span>Theo dõi Linkedin tác giả</span></a>
	<label class='social-check-label' for='socialcheckbox' />
</div>

Bước 3: Lưu thay đổi và xem thành quả.
Có thắc mắc gì thì cứ comment bên dưới bài viết này mình sẽ giải đáp nhé.

Khả Hân

"Hãy bước đi, vì phía trước là mặt trời". Các bạn thấy bài viết mình chia sẻ hãy chia sẻ giúp mình nhớ <3. Củm ơn các tình iu đã đọc bài của mình<3.

Bài viết liên quan

Back to top button