Hướng dẫn style button css - nút phong cách css

6 Mẫu Button Dành Cho Người Mới Bắt Đầu Học HTML CSS

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu những cách tạo button bằng HTML, CSS dành cho các bạn mới bắt đầu học lập trình nhé!

Thiết Kế Button 1

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

 
  Button
 

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

Thiết Kế Button 2

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

 Button

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;
  }
.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 1 ở Codepen bên dưới nhé:

See the Pen Mau Button 1 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế Button 2

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

 
   
     Button
   
 

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;
  }
 .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 1 ở Codepen bên dưới nhé:

See the Pen Mau Button 1 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế Button 2

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

 Button

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;
  }
.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 1 ở Codepen bên dưới nhé:

See the Pen Mau Button 1 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế Button 2

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

 Button

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;
  }
.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 1 ở Codepen bên dưới nhé:

See the Pen Mau Button 1 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế Button 2

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

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

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;
  }
 .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 2 ở Codepen bên dưới nhé:

See the Pen Mau Button 2 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế Button 2
Những Hiệu Ứng Button Đẹp Cho Trang Web (2020)

HTML Button 2

CSS Button 2