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,…
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: "Hammersmith One", 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;"> </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: "Hammersmith One", 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;"> </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: "Hammersmith One", 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
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
Đâ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 !
wpDiscuz
