Trước khi đi vào viết mã thì bạn xem trước hình ảnh kết quả của button này ở bên dưới nhé:
Và đây là đoạn mã của button trên nhé:
HTML Button 1
<a class=”button1″ href=”https://www.niemvuilaptrinh.com/”> <span class=”btn1″>Button</span> </a>
CSS Button 1
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1b2a49; } .button1 { background-image: linear-gradient(135deg, #008aff, #86d472); border-radius: 6px; box-sizing: border-box; color: #ffffff; display: block; height: 50px; font-size: 1.4em; font-weight: 600; padding: 4px; position: relative; text-decoration: none; width: 7em; z-index: 2; }.button1:hover { color: #fff; }.button1 .btn1 { align-items: center; background: #0e0e10; border-radius: 6px; display: flex; justify-content: center; height: 100%; transition: background 0.5s ease; width: 100%; }.button1:hover .btn1 { background: transparent; }
Và kết quả bạn xem dự án button 1 ở Codepen bên dưới nhé:
See the Pen Mau Button 1 by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Trước khi đi vào viết mã thì bạn xem trước hình ảnh kết quả của button này ở bên dưới nhé:
Và đây là đoạn mã của button trên nhé:
HTML Button 2
<a href=”https://www.niemvuilaptrinh.com/” class=”btn2″>Button</a>
CSS Button 2
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1b2a49; }.btn2 { font-weight: bold; font-size: 1em; letter-spacing: 0.1em; text-decoration: none; color: #ffffff; display: inline-block; padding: 10px 40px 10px 40px; position: relative; border: 3px solid #ffffff; border-radius: 20px; }
Và kết quả bạn xem dự án button 2 ở Codepen bên dưới nhé:
See the Pen Mau Button 2 by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Trước khi đi vào viết mã thì bạn xem trước hình ảnh kết quả của button này ở bên dưới nhé:
Và đây là đoạn mã của button trên nhé:
HTML Button 3
<a href=”https://www.niemvuilaptrinh.com/”> <button class=”btn3″> <span>Button</span> </button> </a>
CSS Button 3
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1b2a49; } .btn3 { padding: 2px; outline: 0; font-size: 17px; color: rgb(255, 255, 255); background: -webkit-gradient( linear, left top, right top, from(#fdde5c), color-stop(#f8ab5e), color-stop(#f56a62), color-stop(#a176c8), color-stop(#759beb), color-stop(#65beb3), to(#70db96) ); background: linear-gradient( to right, #fdde5c, #f8ab5e, #f56a62, #a176c8, #759beb, #65beb3, #70db96 ); border-radius: 30px; border: 0; box-shadow: none; cursor: pointer; }.btn3 > span { display: block; padding: 10px 20px; font-size: 17px; background: #0e0e10; border-radius: 30px; }
Và kết quả bạn xem dự án button 3 ở Codepen bên dưới nhé:
See the Pen Mau Button 3 by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Trước khi đi vào viết mã thì bạn xem trước hình ảnh kết quả của button này ở bên dưới nhé:
Và đây là đoạn mã của button trên nhé:
HTML Button 4
<a href=”https://www.niemvuilaptrinh.com/” class=”btn4″>Button</a>
CSS Button 4
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1b2a49; }.btn4 { display: inline-block; padding: 0.6em 1.7em; border: 0.1em solid #ffffff; margin: 0 0.3em 0.3em 0; border-radius: 0.12em; box-sizing: border-box; text-decoration: none; font-family: “Roboto”, sans-serif; font-weight: 300; color: #ffffff; text-align: center; transition: all 0.2s; }.btn4:hover { color: #000000; background-color: #ffffff; }
Và kết quả bạn xem dự án button 4 ở Codepen bên dưới nhé:
See the Pen Mau Button 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Trước khi đi vào viết mã thì bạn xem trước hình ảnh kết quả của button này ở bên dưới nhé:
Và đây là đoạn mã của button trên nhé:
HTML Button 5
<a href=”https://www.niemvuilaptrinh.com/”><button class=”btn5-hover btn5″>Button</Button></a>
CSS Button 5
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1b2a49; }.btn5-hover { width: 160px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; margin: 20px; height: 55px; text-align:center; border: none; background-size: 300% 100%; border-radius: 50px; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }.btn5-hover:hover { background-position: 100% 0; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }.btn5-hover:focus { outline: none; }.btn5-hover.btn5 { background-image: linear-gradient( to right, #25aae1, #4481eb, #04befe, #3f86ed ); box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75); }
Và kết quả bạn xem dự án button 5 ở Codepen bên dưới nhé:
See the Pen Mau Button 5 by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Trước khi đi vào viết mã thì bạn xem trước hình ảnh kết quả của button này ở bên dưới nhé:
Và đây là đoạn mã của button trên nhé:
HTML Button 6
<a href=”https://www.niemvuilaptrinh.com/”> <button class=”btn6″>Button</button> </a>
CSS Button 6
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1b2a49; }.btn6 { border: 5em; cursor: pointer; outline: none; font-size: 16px; -webkit-transform: translate(0); transform: translate(0); background-image: linear-gradient(45deg, #4568dc, #b06ab3); padding: 0.7em 2em; border-radius: 65px; box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.438); -webkit-transition: box-shadow 0.25s; transition: box-shadow 0.25s; color: white; }.btn6 .text { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(45deg, #4568dc, #b06ab3); }.btn6:after { content: “”; border-radius: 18px; position: absolute; margin: 4px; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; background: #0e0e10; }.btn6:hover { background-image: linear-gradient(-45deg, #4568dc, #b06ab3); box-shadow: 0 12px 24px rgba(128, 128, 128, 0.1); }.btn6:hover .text { background-image: linear-gradient(-45deg, #4568dc, #b06ab3); }
Và kết quả bạn xem dự án button 6 ở Codepen bên dưới nhé:
See the Pen Mau Button 6 by haycuoilennao19 (@haycuoilennao19) on CodePen.
Nguồn
Nếu bạn muốn tham khảo thêm các mẫu button khác thì có thể truy cập đường dẫn bên dưới nhé!Những Hiệu Ứng Button Đẹp Cho Trang Web (2020)
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo button bằng HTML, CSS hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
Tôi là Nguyễn Văn Sỹ có 15 năm kinh nghiệm trong lĩnh vực thiết kế, thi công đồ nội thất; với niềm đam mê và yêu nghề tôi đã tạo ra những thiết kếtuyệt vời trong phòng khách, phòng bếp, phòng ngủ, sân vườn… Ngoài ra với khả năng nghiên cứu, tìm tòi học hỏi các kiến thức đời sống xã hội và sự kiện, tôi đã đưa ra những kiến thức bổ ích tại website nhaxinhplaza.vn. Hy vọng những kiến thức mà tôi chia sẻ này sẽ giúp ích cho bạn!