Các nút CSS - CSS Buttons

Bảng chạy thử CSS Buttons Chèn CSS vào đây filter_1 Kiểu nút cơ bản Kiểu nút cơ bản <style> .button { background-color: #4CA...

css + thủ thuật blog

Xếp hạng bài viết

Tham khảo các bài viết khác.

Bảng chạy thử CSS Buttons

Chèn CSS vào đây

filter_1Kiểu nút cơ bản

Kiểu nút cơ bản

<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
<h2>CSS Buttons</h2>
<button>Nút-Button Mặc định</button>
<a href="#" class="button">Link Button</a>
<button class="button">Nút-Button</button>

filter_2Màu nút
Thay đổi nàu nền của nút bằng thuộc tính background-color.

Màu nút

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Xanh da trời-Blue */
.button3 {background-color: #f44336;} /* Đỏ-Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Xám-Gray */ 
.button5 {background-color: #555555;} /* Đen-Black */
</style>

<h2>Button Colors</h2>
<p>Thay đổi nàu nền của nút bằng thuộc tính background-color</p>

<button class="button">Xanh lá-Green</button>
<button class="button button2">Xanh da trời-Blue</button>
<button class="button button3">Đỏ-Red</button>
<button class="button button4">Xám-Gray</button>
<button class="button button5">Đen-Black</button>

filter_3Kích thước nút
Thay đổi kích thước phông chữ của một nút với thuộc tính font-size.

Kích thước nút

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>

<h2>Button Sizes</h2>
<p>Thay đổi kích thước phông chữ của một nút với thuộc tính font-size </p>

<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>

Thay đổi vùng đệm của một nút bằng thuộc tính padding.

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
</style>

<h2>Button Sizes</h2>
<p>Thay đổi vùng đệm của một nút bằng thuộc tính padding</p>

<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
<button class="button button3">14px 40px</button>
<button class="button button4">32px 16px</button>
<button class="button button5">16px</button>

filter_4Các nút tròn
Thêm các góc tròn vào nút với thuộc tính border-radius.

Các nút tròn

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>

<h2>Rounded Buttons</h2>
<p>Thêm các góc tròn vào nút với thuộc tính border-radius</p>

<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>

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

Đường viền nút màu

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}
</style>

<h2>Colored Button Borders</h2>
<p>Sử dụng thuộc tính border để thêm đường viền vào nút</p>

<button class="button button1">Xanh lá-Green</button>
<button class="button button2">Xanh da trời-Blue</button>
<button class="button button3">Đỏ-Red</button>
<button class="button button4">Xám-Gray</button>
<button class="button button5">Đen-Black</button>

filter_6Kiểu của nút khi bạn di chuyển chuột qua nút
Sử dụng thuộc tính hover để thay đổi kiểu của nút khi bạn di chuyển chuột qua nó.
Tip: Sử dụng thuộc tính transition-duration để xác định tốc độ của hiệu ứng di chuột.

Kiểu của nút khi bạn di chuyển chuột qua nút

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button3:hover {
  background-color: #f44336;
  color: white;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}
</style>

<h2>Hoverable Buttons</h2>
<p>Sử dụng :hover để thay đổi kiểu của nút khi bạn di chuyển chuột qua nó.
</p>
<p><strong>Tip: Sử dụng thuộc tính <transition-duration> để xác định tốc độ của hiệu ứng "di chuột"</p>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

filter_7Thêm bóng vào nút
Sử dụng thuộc tính box-shadow để thêm bóng vào nút.

Thêm bóng vào nút

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>

<h2>Shadow Buttons</h2>
<p>Sử dụng thuộc tính box-shadow để thêm bóng vào nút</p>

<button class="button button1">Shadow Button</button>
<button class="button button2">Shadow on Hover</button>

filter_8Tạo nút bị vô hiệu hóa
Sử dụng thuộc tính opacity để thêm một lớp trong suốt cho nút (làm cho nó trông bị vô hiệu hóa).
Tip: Bạn cũng có thể thêm thuộc tính cursor với giá trị not allowed - không được phép, thuộc tính này sẽ hiển thị no parking sign - biển báo cấm đỗ xe khi bạn di chuột qua nút.

Tạo nút bị vô hiệu hóa

<style>
.button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

<h2>Disabled Buttons</h2>
<p>Sử dụng thuộc tính opacity để thêm một lớp trong suốt cho nút (làm cho nó trông bị vô hiệu hóa)</p>

<button class="button">Normal Button</button>
<button class="button disabled">Disabled Button</button>

filter_9Chiều rộng nút
Theo mặc định, kích thước của nút được xác định bởi nội dung văn bản của nó (độ rộng tỷ lệ theo nội dung của nó).
Sử dụng thuộc tính width hoặc % để thay đổi chiều rộng của nút.

Chiều rộng nút

<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
</style>

<h2>Button Width</h2>
<p>Sử dụng thuộc tính width hoặc % để thay đổi chiều rộng của nút.</p>

<button class="button button1">250px</button><br>
<button class="button button2">50%</button><br>
<button class="button button3">100%</button>

NHÓM NÚT filter_1flip_to_frontNhóm nút cơ bản

Nhóm nút cơ bản

<style>
.btn-group .button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
</style>

<h2>Button Groups</h2>

<div class="btn-group">
  <button class="button">Button1</button>
  <button class="button">Button2</button>
  <button class="button">Button3</button>
  <button class="button">Button4</button>
</div>

filter_1filter_1Nhóm nút có viền
Sử dụng thuộc tính border để tạo nhóm nút có viền.

Nhóm nút có viền

<style>
.btn-group .button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.btn-group .button:not(:last-child) {
  border-right: none; /* -Ngăn 2 đường viền-Prevent double borders */
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
</style>

<h2>Bordered Button Group</h2>
<p>Sử dụng thuộc tính border để tạo nhóm nút có viền.</p>

<div class="btn-group">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>

filter_1filter_2Nhóm nút dọc
Sử dụng display:block thay vì float:left để nhóm các nút bên dưới nhau, thay vì cạnh nhau.

Nhóm nút dọc

<style>
.btn-group .button {
  background-color: #4CAF50; /* Xanh lá-Green */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  width: 150px;
  display: block;
}

.btn-group .button:not(:last-child) {
  border-bottom: none; /* Ngăn 2 đường viền-Prevent double borders */
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
</style>

<h2>Vertical Button Group</h2>

<div class="btn-group">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>

filter_1filter_3Thêm nút vào hình ảnh

Thêm nút vào hình ảnh

<style>
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container img {
  width: 100%;
  height: auto;
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  color: black;
  font-size: 16px;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container .btn:hover {
  background-color: black;
  color: white;
}
</style>

<h2>Button on Image</h2>
<p>Thêm nút vào hình ảnh</p>

<div class="container">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigieovp8US0ltkZ33JZUx-kYgmbZMuPSpxaBvvteKknBegfaiVfhxUONQEXSazk9ZSaVb4gV_woJfxaCI_AfzHtsrLM4mGfGT_ggeqEZaklefM3Q2QglKx754IlRYHwKh0qlgTZkOhDQ/s320/qrviet-anh.png" alt="Snow" style="width:100%">
  <button class="btn">Button</button>
</div>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigieovp8US0ltkZ33JZUx-kYgmbZMuPSpxaBvvteKknBegfaiVfhxUONQEXSazk9ZSaVb4gV_woJfxaCI_AfzHtsrLM4mGfGT_ggeqEZaklefM3Q2QglKx754IlRYHwKh0qlgTZkOhDQ/s320/qrviet-anh.png

filter_1filter_4Thêm một mũi tên ">>" hiện ra khi di chuột vào nút

Thêm một mũi tên ">>" hiện ra khi di chuột vào nút

<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
</style>

<h2>Animated Button</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

filter_1filter_5Thêm hiệu ứng "nhấn" khi nhấp chuột vào nút

Thêm hiệu ứng "nhấn" khi nhấp chuột vào nút

<style>
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>

<h2>Animated Buttons - "Pressed Effect"</h2>

<button class="button">Click Me</button>

filter_1filter_6Hiệu ứng "mờ dần" khi di chuột vào nút

Hiệu ứng "mờ dần" khi di chuột vào nút

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
  background-color: #f4511e;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {opacity: 1}
</style>

<h2>Fading Buttons - "Fade in Effect"</h2>

<button class="button">Hover Over Me</button>

filter_1filter_7Hiệu ứng "gợn sóng" khi nhấp chuột

Hiệu ứng "gợn sóng" khi nhấp chuột

<style>
.button {
  position: relative;
  background-color: #4CAF50;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}
</style>

<h2>Animated Button - Ripple Effect</h2>

<button class="button">Click Me</button>

CHIA SẺ CHO BẠN BÈ