Hướng dẫn cool button css styles - phong cách css nút mát mẻ

Question

Tìm hiểu cách tạo kiểu nút bằng CSS.

Nội dung chính Show

Kiểu nút cơ bản
Màu sắc nút
Màu sắc nút
Màu sắc nút
Màu sắc nút
Màu sắc nút
Màu sắc nút
Màu sắc nút
Kích thước nút
Sử dụng thuộc tính padding để thay đổi phần đệm của nút:
Các nút tròn
Sử dụng thuộc tính border để thêm đường viền màu vào nút:
.Button1 {& nbsp; màu nền: màu trắng; & nbsp; & nbsp; màu: đen; & nbsp; Biên giới: 2px rắn #4CAF50; /* Màu xanh lá */}...
Thiết Kế CSS3 Chọn thả xuống
Các Ví Dụ Khác Về Thẻ Select
Cách Tạo Hiệu Ứng Hover CSS Select Box
Các Ví Dụ Khác Về Thẻ Select
Các Ví Dụ Khác Về Thẻ Select
Các Ví Dụ Khác Về Thẻ Select
Các Ví Dụ Khác Về Thẻ Select
Các Ví Dụ Khác Về Thẻ Select
Các Ví Dụ Khác Về Thẻ Select
Các Ví Dụ Khác Về Thẻ Select
Các Ví Dụ Khác Về Thẻ Select
Các Ví Dụ Khác Về Thẻ Select
Các Ví Dụ Khác Về Thẻ Select
Các Ví Dụ Khác Về Thẻ Select
Thiết Kế Pure CSS Select Dropdown
Thiết Kế Pure CSS Select Dropdown
Thiết Kế Pure CSS Select Dropdown
Thiết Kế Pure CSS Select Dropdown
Thiết Kế Pure CSS Select Dropdown
Thiết Kế Pure CSS Select Dropdown
Thiết Kế Pure CSS Select Dropdown
Thiết Kế Pure CSS Select Dropdown
Thiết Kế Pure CSS Select Dropdown
Thiết Kế Pure CSS Select Dropdown
Cách Tạo CSS Style Select Option Dropdown
Cách Tạo Jquery Select
Cách Tạo Javascript Select Dropdown Option
Cách Tạo Javascript Select Dropdown Với Icon
Thiết Kế Select Dropdown Button

Kiểu nút cơ bản

Thí dụ

.Button {& nbsp; & nbsp; màu nền: #4caf50; / * Xanh */& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 15px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-block; & nbsp; & nbsp; kích thước phông chữ: 16px; }
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

Hãy tự mình thử »

Màu sắc nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

Thí dụ

.Button {& nbsp; & nbsp; màu nền: #4caf50; / * Xanh */& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 15px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-block; & nbsp; & nbsp; kích thước phông chữ: 16px; }
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */

Hãy tự mình thử »

Màu sắc nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

Thí dụ

.Button {& nbsp; & nbsp; màu nền: #4caf50; / * Xanh */& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 15px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-block; & nbsp; & nbsp; kích thước phông chữ: 16px; }
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Hãy tự mình thử »

Màu sắc nút

Thí dụ

.Button {& nbsp; & nbsp; màu nền: #4caf50; / * Xanh */& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 15px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-block; & nbsp; & nbsp; kích thước phông chữ: 16px; }
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

Hãy tự mình thử »

Màu sắc nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

Thí dụ

.Button {& nbsp; & nbsp; màu nền: #4caf50; / * Xanh */& nbsp; Biên giới: Không có; & nbsp; Màu sắc: Trắng; & nbsp; Đệm: 15px 32px; & nbsp; Văn bản-Align: Trung tâm; & nbsp; trang trí văn bản: Không có; & nbsp; Hiển thị: Inline-block; & nbsp; & nbsp; kích thước phông chữ: 16px; }
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

Hãy tự mình thử »

Màu sắc nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

Thí dụ

. {Màu nền: #E7E7E7; Màu sắc: đen;} / * màu xám * /.button5 {màu nền: #555555;} / * đen * / /
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...

Hãy tự mình thử »

Màu sắc nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

. {Màu nền: #E7E7E7; Màu sắc: đen;} / * màu xám * /.button5 {màu nền: #555555;} / * đen * / / Use the transition-duration property to determine the speed of the "hover" effect:

Thí dụ

Kích thước nút
transition-duration: 0.4s;
}

Sử dụng thuộc tính font-size để thay đổi kích thước phông chữ của nút:
background-color: #4CAF50; /* Green */
color: white;
}
...

Hãy tự mình thử »

Màu sắc nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

Thí dụ

. {Màu nền: #E7E7E7; Màu sắc: đen;} / * màu xám * /.button5 {màu nền: #555555;} / * đen * / /
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Kích thước nút
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Hãy tự mình thử »

Màu sắc nút

Sử dụng thuộc tính background-color để thay đổi màu nền của nút:

. {Màu nền: #E7E7E7; Màu sắc: đen;} / * màu xám * /.button5 {màu nền: #555555;} / * đen * / / You can also add the

body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
 }
 h2 {
   margin: 0 0 0.25em;
   color:black;
 }
 /* Thiết kẻ thẻ select */
 select {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
   outline: 0;
   box-shadow: none;
   border: 0 !important;
   background: DeepSkyBlue;
   background-image: none;
 }
.select {
   position: relative;
   display: flex;
   width: 20em;
   height: 3em;
   line-height: 3;
   background: #fff;
   overflow: hidden;
   border-radius: .25em;
 }
 select {
   flex: 1;
   padding: 0 .5em;
   color: #fff;
   cursor: pointer;
 }
 /* thiết kế dấu mũi tên */
 .select::after {
   content: '25BC';
   position: absolute;
   top: 0;
   right: 0;
   padding: 0 1em;
   background: DodgerBlue;
   cursor: pointer;
   pointer-events: none;
   -webkit-transition: .25s all ease;
   -o-transition: .25s all ease;
   transition: .25s all ease;
   color: white;
 }
 /* Hiệu ứng hover */
 .select:hover::after {
   color: Gainsboro;
 }

1 property with a value of "not-allowed", which will display a "no parking sign" when you mouse over the button:

Kích thước nút

Sử dụng thuộc tính font-size để thay đổi kích thước phông chữ của nút:

Thí dụ

.
.button2 {width: 50%;}
.button3 {width: 100%;}

Hãy tự mình thử »

Sử dụng thuộc tính padding để thay đổi phần đệm của nút:

.

Các nút tròn

Sử dụng thuộc tính border-radius để thêm các góc tròn vào một nút:

. }

Nút màu biên giới

Sử dụng thuộc tính border để thêm đường viền màu vào nút:

Hãy tự mình thử »

.Button1 {& nbsp; màu nền: màu trắng; & nbsp; & nbsp; màu: đen; & nbsp; Biên giới: 2px rắn #4CAF50; /* Màu xanh lá */}...

Thiết Kế JQuery Chọn Menu

Xem menu Chọn bút của Pierre Laurent (@Plines) trên Codepen.

Thiết Kế CSS3 Chọn thả xuống
Xem bộ bài CSS3 BEN CSS3 thả xuống bởi Tibor Katelbach (@oceatoon) trên Codepen.
Cách tạo chọn hộp CSS CSS
Xem Pen tùy chỉnh của Christophe Corbalan (@Redstarzon) trên Codepen.
Thiết kế html5 Chọn thả xuống
Xem bút tùy chỉnh được chọn bởi Yusuf (@YY) trên Codepen.
Cách tạo Chọn Dropdown JS
Cách tạo JavaScript Chọn biểu tượng Dropdown VớI
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống
Cách Thiết Kế CSS Animate Chọn thả xuống

Thiết Kế CSS3 Chọn thả xuống

Xem bộ bài CSS3 BEN CSS3 thả xuống bởi Tibor Katelbach (@oceatoon) trên Codepen.

HTML

<h2>Thiết Kế Thẻ Select</h2>
 <div class="select">
   <select>
     <option selected disabled>Chọn Giá Trị</option>
     <option value="1">HTML</option>
     <option value="2">CSS</option>
     <option value="3">Javascript</option>
   </select>
 </div>

Tiếp theo chúng ta sẽ thiết kẻ thẻ

body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
 }
 h2 {
   margin: 0 0 0.25em;
   color:black;
 }
 /* Thiết kẻ thẻ select */
 select {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
   outline: 0;
   box-shadow: none;
   border: 0 !important;
   background: DeepSkyBlue;
   background-image: none;
 }
.select {
   position: relative;
   display: flex;
   width: 20em;
   height: 3em;
   line-height: 3;
   background: #fff;
   overflow: hidden;
   border-radius: .25em;
 }
 select {
   flex: 1;
   padding: 0 .5em;
   color: #fff;
   cursor: pointer;
 }
 /* thiết kế dấu mũi tên */
 .select::after {
   content: '25BC';
   position: absolute;
   top: 0;
   right: 0;
   padding: 0 1em;
   background: DodgerBlue;
   cursor: pointer;
   pointer-events: none;
   -webkit-transition: .25s all ease;
   -o-transition: .25s all ease;
   transition: .25s all ease;
   color: white;
 }
 /* Hiệu ứng hover */
 .select:hover::after {
   color: Gainsboro;
 }

7 trên bằng các thuộc tính trong CSS nhé!

CSS

body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
 }
 h2 {
   margin: 0 0 0.25em;
   color:black;
 }
 /* Thiết kẻ thẻ select */
 select {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   appearance: none;
   outline: 0;
   box-shadow: none;
   border: 0 !important;
   background: DeepSkyBlue;
   background-image: none;
 }
.select {
   position: relative;
   display: flex;
   width: 20em;
   height: 3em;
   line-height: 3;
   background: #fff;
   overflow: hidden;
   border-radius: .25em;
 }
 select {
   flex: 1;
   padding: 0 .5em;
   color: #fff;
   cursor: pointer;
 }
 /* thiết kế dấu mũi tên */
 .select::after {
   content: '25BC';
   position: absolute;
   top: 0;
   right: 0;
   padding: 0 1em;
   background: DodgerBlue;
   cursor: pointer;
   pointer-events: none;
   -webkit-transition: .25s all ease;
   -o-transition: .25s all ease;
   transition: .25s all ease;
   color: white;
 }
 /* Hiệu ứng hover */
 .select:hover::after {
   color: Gainsboro;
 }

Và kết quả cuối cùng bạn xem dưới đây nhé:

See the Pen Thiết kế thẻ select HTML CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Các Ví Dụ Khác Về Thẻ Select

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.