Chia sẻ code nút Button trong HTML CSS


Vi dụ : Tôi đang dùng Wordpress và sử dụng theme Flatsome để làm website của mình
muốn thêm nút button này thì làm như sau :

Trên giao diện  Flatsome , chọn Theme Options


Sau đó chọn tiếp , CSS bổ sung



Dán đoạn code sau vào như ảnh , sau đó bấm đăng.


Code CSS: 

/* nut button */
.parentContainer {
  text-align: center;
}

.button {
  background-color: #DD3333;
  border: none;
  color: white;
  padding: 5px 10px 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 2px 2px;
  cursor: pointer;
}

.button {
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #ff0000;
  color: white;
}

.button {
  border-radius: 5px;
}


Tiếp theo, ta thêm 1 text và copy đoạn code html sau vào để hiển thị nút Button


code html : 

<div class="parentContainer">
  <a href="https://lamleit.blogspot.com/"><button class="button button">Xem tất cả</button> </a>
</div>

Các bạn có thể thực hành trên : https://codepen.io/pen/

Chúc các bạn thành công !

Post a Comment

أحدث أقدم