CSS button đẹp (nút bấm) – HTML and CSS Button Styles

Hello, bài viết này Hocban.vn chia sẻ đến bạn bộ sưu tập CSS button đẹp (nút bấm) – trong tiếng Anh gọi là HTML and CSS Button Styles. Bạn chỉ cần copy code mẫu đem chèn vào một ví trí bất kỳ trên website như: trong bài viết, text widget,…

CSS button đẹp (nút bấm)

Nút bấm – button HTML CSS đẹp

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>

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>

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>

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;
}

Mình vẫn đang sưu tầm tiếp, cứ nhìn thấy ở đâu có nút bấm CSS đẹp là mình sẽ gom về đây. Nếu bạn có nút bấm đẹp, đừng quên chia sẻ với Hocban.vn bằng comment phía bên dưới nhé, cảm ơn bạn !

4/5 - (5 votes)
guest
17 Comments
Inline Feedbacks
View all comments
iqos <span style="color: #2196f3;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #2196f3;">) </span>
Guest

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

Lại Đình Cường
Guest

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

Lại Đình Cường
Guest
Đã 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
Guest
Đã 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ũ
Guest

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

Hoàng Vũ
Guest
Đã trả lời  Hoàng Vũ

zía zìa 😀

Hoàng Vũ
Guest
Đã trả lời  Hoàng Vũ

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

Hoàng Vũ
Guest
Đã 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
Guest

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 😂