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,…

#01 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>

#02 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>

#03 Nút bấm chuyên mục con trên Hocban.vn

HTML Cơ BảnCSS Cơ Bản

Đây là code để anh em chèn vào, nó có 2 nút, nếu xài hai cái thì thôi còn xài một cái thì bạn chuyển sang chế độ soạn thảo trực quan (visual) |>> bôi đen nút đó bấm delete là được.

<a href="https://hocban.vn/web-development/hoc-html-co-ban"><span style="color: #ffffff; background: #2196f38f; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); padding: 0.5em 1em; display: inline-block; margin: 0.5em; margin-left: 0em !important;"><strong>HTML Cơ Bản</strong></span></a><a href="https://hocban.vn/web-development/hoc-css-co-ban"><span style="color: #ffffff; background: #00aecd94; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); padding: 0.5em 1em; display: inline-block; margin: 0.5em 0;"><strong>CSS Cơ Bản</strong></span></a>

#04 Nút Bấm dành cho tùy biến theme của Hocban.vn

See the Pen
Nut bam tieu chuan hocban.vn
by Hocban.vn (@hocbanvn)
on CodePen.

Đầu tiên bạn chèn code HTML này vào đoạn văn, text widget hay chỗ nào bạn muốn nó hiển thị.

<div class="nut-bam"><a href="https://hocban.vn/bo-suu-tap-nut-bam-html-css-button-styles"><span style="font-family: arial;">Xem thử</span></a></div>

Đây là CSS tiêu chuẩn của nó, bạn đem dán nó vào đầu file CSS bổ sung của WordPress / Blogspot (Additional CSS).

.nut-bam a:hover {
background: #03A9F4 !important;
color: white !important;
border-radius:5px;
}

.nut-bam a:link, .nut-bam a:visited {
width: fit-content;
padding: 0.5em 1em;
text-align: center;
float: inherit;
margin: 0em auto;
color: #ffffff;
background: #00000026;
border-radius:5px;
}

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

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Không biết bạn đã từng đọc qua các nội dung dưới đây chưa nhỉ ?

guest
17 Comments
Inline Feedbacks
View all comments
iqos <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
Friend

Bác có code trang chờ cho link out không bác. Mình tìm mãi

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend

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

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Lại Đình Cường

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ỉ để… Read more »

Lại Đình Cường <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">117</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Lại Đình Cường

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é ^^

Hoàng Vũ <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">51</span><span style="color: #e91e63;">) </span>
Friend

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

Hoàng Vũ <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">51</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Hoàng Vũ

zía zìa 😀

Hoàng Vũ <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">51</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Hoàng Vũ

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

Hoàng Vũ <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">51</span><span style="color: #e91e63;">) </span>
Friend
Đã trả lời  Hoàng Vũ

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!

Tịnh Nguyễn Blog <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">30</span><span style="color: #e91e63;">) </span>
Admin

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 😂