Bộ sưu tập nút bấm – HTML and CSS Button Styles

Hehe, xin chào các bạn hôm nay Hocban.vn chia sẻ đến mọi người bộ sưu tập nút bấm – HTML and CSS Buttons Style khá đẹp, dễ dàng chèn ở nhiều vị trí như trong bài viết, text widget,…

1. Bộ sưu tập nút bấm từ Themezee

Kaka, bạn nào vào themezee thì sẽ thấy nó khi xem chi tiết một cái theme, ở thời điểm hiện tại thì các nút bấm nó như thế này này. Mời anh em tham khảo và dùng thử chơi :v

THEME DEMO DOWNLOAD THEME VIEW PRO VERSION



Đây là code của nút bấm thuần HTML và CSS, anh em dán nó vào bài viết ở chế độ Text (trên WordPress) nhé !

<a  href="https://hocban.vn/chia-se-giao-dien-hocban-vn-dang-su-dung-cho-ban-nao-thich" style="background: rgb(68, 68, 68); border: none; box-sizing: inherit; color: white; display: inline-block; font-family: &quot;Hammersmith One&quot;, Tahoma, Arial; font-size: 1.125rem; margin: 0px 0.3em 10px 0px; outline: 0px; padding: 0.4em 1.6em; text-decoration-line: none; text-transform: uppercase; transition: all 0.3s ease;" target="_blank">THEME DEMO</a>

<span style="background-color: white; color: #404040; font-family: Arimo, Tahoma, Arial; font-size: 17px;">&nbsp;</span><a  href="https://tinhnguyenblog.blogspot.com/2017/04/chia-se-giao-dien-theme-hocbanvn-dang-su-dung.html" id="single-theme-download" style="background: rgb(26, 107, 178); border: none; box-sizing: inherit; color: white; display: inline-block; font-family: &quot;Hammersmith One&quot;, Tahoma, Arial; font-size: 1.125rem; margin: 0px 0.3em 10px 0px; padding: 0.4em 1.6em; text-decoration-line: none; text-transform: uppercase; transition: all 0.3s ease;">DOWNLOAD THEME</a>

<span style="background-color: white; color: #404040; font-family: Arimo, Tahoma, Arial; font-size: 17px;">&nbsp;</span><a  href="https://hocban.vn/chia-se-giao-dien-hocban-vn-dang-su-dung-cho-ban-nao-thich/" style="background: rgb(111, 196, 98); border: none; box-sizing: inherit; color: white; display: inline-block; font-family: &quot;Hammersmith One&quot;, Tahoma, Arial; font-size: 1.125rem; margin: 0.2em 0.3em 0px 0px; padding: 0.4em 1.6em; text-decoration-line: none; text-transform: uppercase; transition: all 0.3s ease;">VIEW PRO VERSION</a>

2. Nút bấm liên kết mạng xã hội từ Thuthuatios.com

Cái này nó có phần giới thiệu về tác giả bài viết, mẫu này anh em có thể ngâm cứu thêm để cho nó vào khung tác giả bài viết hoặc là các nút nhấn dành cho project như demo, dowload, view sourse,..

Vỹ Spirit

Yêu thích iOS và là tín đồ của Apple. Thích chia sẻ những thứ mình biết, đam mê làm web và xem tin tức công nghệ.

Facebook Instagram Twitter

Cũng khá đẹp đúng không nào, nhưng mà nó không lấy được mấy cái hiệu ứng với icon mạng xã hội. Nhưng không sao, cái này cũng làm được nhiều nút bấm hay ho rồi. Đây là code của em nó:

<span style="background-color: white; box-sizing: border-box; color: #000000; display: block; 
font-family: arial, sans-serif; font-size: 20px; font-weight: bold; line-height: 20px; 
margin-bottom: 14px;">Vỹ Spirit</span>

<div style="background-color: white; box-sizing: border-box; color: #4e565d;
 font-family: Arial, sans-serif; font-size: 16px; line-height: 21px; 
margin-bottom: 15px;"><span style="color: #008000;">Yêu thích iOS và là tín đồ của Apple. 
Thích chia sẻ những thứ mình biết, đam mê làm web và xem tin tức công nghệ.</span></div>

<a style="background-color: white;
border-radius: 2px; border: 1px solid #3b5998; box-sizing: border-box; color: #3b5998; 
display: inline-block; font-family: Arial, sans-serif; font-size: 14px; line-height: 16.8px; 
margin: 0px 3px 10px; padding: 10px 14px; text-decoration-line: none; transition: all 0.2s;" href="https://www.facebook.com/tinhnguyenntu" target="_blank" rel="noopener noreferrer">Facebook</a>

<span style="background-color: white;
 color: #636363; font-family: 'arial' , sans-serif; font-size: 16px;"> </span><a style="background-color: white; 
border-radius: 2px; border: 1px solid #e95950; box-sizing: border-box; 
color: #e95950; display: inline-block; font-family: Arial, sans-serif;
font-size: 14px; line-height: 16.8px; margin: 0px 3px 10px; 
padding: 10px 14px; text-decoration-line: none; transition: all 0.2s;" href="https://www.instagram.com/hocbanvn/" target="_blank" rel="noopener noreferrer">Instagram</a>

<span style="background-color: white; color: #636363; font-family: 'arial' , sans-serif;
 font-size: 16px;"> </span><a  style="background-color: white; border-radius: 2px; border: 1px solid #00aced; 
box-sizing: border-box; color: #00aced; display: inline-block; 
font-family: Arial, sans-serif; font-size: 14px; line-height: 16.8px; 
margin: 0px 3px 10px; padding: 10px 14px; text-decoration-line: none; 
transition: all 0.2s;" href="https://twitter.com/hocbanvn" target="_blank" rel="noopener noreferrer">Twitter</a>

Đang sưu tầm tiếp anh em ạ :v

Mời bạn oánh giá 😇

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, một thanh niên đẹp ZAI, dễ thương VL 😂

avatar
3 Comment threads
12 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
Lại Đình CườngHocban.vnHoàng VũTịnh Nguyễn Blog Recent comment authors
Lại Đình Cường <span class="wpdiscuz-comment-count">111 bình luận </span>

Cập nhật thêm đi bạn, còn nhiều kiểu đẹp lắm.

Lại Đình Cường <span class="wpdiscuz-comment-count">111 bình luận </span>

Mình đang bận dự án, sang tháng có thời gian mình sẽ cập nhật thêm cho HocWP. Thêm nhiều nút chia sẻ khác nữa, xuất hiện cả đầu bài và cuối bài luôn, ngoài ra thì còn bổ sung thêm bài viết liên quan, top commenter,…

Mong anh em có thời gian ghé qua bển chém gió cho vui nhé ^^

Lại Đình Cường <span class="wpdiscuz-comment-count">111 bình luận </span>

Hình như đó là thói quen chung rồi, mình hay đi comment và click vào mấy bác có để link trong bình luận. Blog nào cho phép comment thì bookmark lại, lâu lâu nhảy vào chém chơi vui. Thật sự nội dung bây giờ tìm kiếm dễ ra quá, có viết như thế nào thì trang của mình vẫn không đặc sắc hơn được. Mình nghĩ quan trọng nhất vẫn là thái độ của chủ blog đối với độc giả, đón tiếp niềm nở thì họ sẽ quay lại 🙂 Đọc báo, đọc blog hay diễn đàn cũng chỉ để… Xem thêm »

Hoàng Vũ <span class="wpdiscuz-comment-count">51 bình luận </span>

mấy dòng này đơn giản mà 😀

Hoàng Vũ <span class="wpdiscuz-comment-count">51 bình luận </span>

chuẩn lun bác! Cứ làm cái post tổng hợp này lại hay chứ khi nào muốn dùng lại truy cập vô rùi view source rùi coppy rùi paste cũng mệt ghê. 😀 Muốn thì gõ hocban.vn là ra ngay ha!

Hoàng Vũ <span class="wpdiscuz-comment-count">51 bình luận </span>

có mùi đu đủ phảng phất quanh đây! :v

Hoàng Vũ <span class="wpdiscuz-comment-count">51 bình luận </span>

zía zìa 😀

Tịnh Nguyễn Blog <span class="wpdiscuz-comment-count">25 bình luận </span>

Mình nghĩ cũng nên chấm một cái vì vừa thấy có anh em xài cái bút ton giống trong bộ sưu tập 😂