Tạo Button Tooltips bằng CSS3

Hôm nay mình sẽ chia sẻ cho các bạn một dạng nút bấm (button) rất đẹp với hiệu ứng tooltips cực cool. Chúng ta sẻ chỉ sử dụng CSS3 mà không cần phải dùng bất kì đoạn script hay bất cứ một ảnh động nào.

Xem Demo | Download

HTML

Sau đây là bộ khung html mà chúng ta cần có để tạo button cũng như đoạn tooltips ngắn sẽ xuất hiện khi chúng ta rê chuột vào nút bấm.

<div class="wrap">
  <button class="tip">
    What's this do?
     
    <span class="left">It doesn't do anything, don't bother clicking on it.<span class="nub"></span>
    </span>
  </button>
</div>

CSS

Sau khi có bộ khung, chúng ta sẽ tiến hành định dạng css từng bước để tạo hình button cũng như tạo hiệu ứng động khi chúng ta rê chuột vào nút bấm đó.

Đầu tiên chúng ta cần tạo hình cho button như sau :

.wrap button {
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: bold;
  font-size: 36px;
  text-shadow: 1px 1px 0px #ffffff;
  color: #333;
  display: block;
  padding: 10px 30px;
  margin: 0 auto;
  min-awidth: 200px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  box-shadow: 1px 1px 1px #ffffff;
  -moz-box-shadow: 1px 1px 1px #ffffff;
  -webkit-box-shadow: 1px 1px 1px #ffffff;
  text-shadow: 1px 1px 0px #fff;
  font-weight: 400;
  color: #333;
  border: 1px solid #aaa;
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: #feffe8;
  /* Old browsers */
 
  background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%);
  /* FF3.6+ */
 
  background: -webkit-linear-gradient(top, #feffe8 0%, #d6dbbf 100%);
  /* Chrome10+,Safari5.1+ */
 
  background: -webkit-linear-gradient(to bottom, #feffe8 0%, #d6dbbf 100%);
  /* W3C */
 
  -moz-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  /* span stuffs (tooltip) */
 
}

Kế tiếp là cho sự kiện hover và active :

.wrap button:hover {
  background: -moz-linear-gradient(top, #fffce7 0%, #fdfd9f 100%);
  /* FF3.6+ */
 
  background: -webkit-linear-gradient(top, #fffce7 0%, #fdfd9f 100%);
  /* Chrome10+,Safari5.1+ */
 
  background: -webkit-linear-gradient(to bottom, #fffce7 0%, #fdfd9f 100%);
  /* W3C */
 
}
.wrap button:active {
  background: -moz-linear-gradient(top, #f8c67a 0%, #e28904 49%, #f9ac39 50%, #f9d4a1 100%);
  /* FF3.6+ */
 
  background: -webkit-linear-gradient(top, #f8c67a 0%, #e28904 49%, #f9ac39 50%, #f9d4a1 100%);
  /* Chrome10+,Safari5.1+ */
 
  background: -webkit-linear-gradient(to bottom, #f8c67a 0%, #e28904 49%, #f9ac39 50%, #f9d4a1 100%);
  /* W3C */
 
}

Kế tiếp là chúng ta định dạng css cho phần tooltips, ở phần này chúng ta sẽ làm sẵn từng vị trí tương ứng với các class như top, bottom, right và left và tạo hiệu ứng động khi rê chuột vào nút bấm :

.wrap button span {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  padding: 10px;
  awidth: 190px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-shadow: 0 0 0 #ffffff;
  font-weight: normal;
  color: rgba(255, 255, 255, 0);
  opacity: 0;
  font-size: 16px;
  -moz-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -transition-delay: 0.2s;
  z-index: 1;
}
.wrap button span .nub {
  display: block;
  awidth: 10px;
  height: 10px;
  padding: 5px;
  border-style: solid;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.8);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  left: 42%;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  z-index: 0;
  -moz-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -transition-delay: 0.2s;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}
.wrap button span.top {
  top: 0px;
  left: 4px;
}
.wrap button span.top .nub {
  left: 20%;
  bottom: -8px;
}
.wrap button span.bottom {
  bottom: 0px;
  left: 4px;
}
.wrap button span.bottom .nub {
  left: 20%;
  top: -8px;
}
.wrap button span.left {
  top: 0px;
  left: 4px;
}
.wrap button span.left .nub {
  left: 180px;
  top: 20px;
}
.wrap button span.right {
  top: 0px;
  right: 4px;
}
.wrap button span.right .nub {
  left: -8px;
  top: 20px;
  margin: 0 0 0 0;
  -moz-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
}
.wrap button:hover span {
  background: #0099ff;
  height: auto;
  color: #fff;
  font-size: 16px;
  opacity: 100;
  -moz-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -transition-delay: 0.2s;
}
.wrap button:hover span .nub {
  -moz-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -transition-delay: 0.2s;
}
.wrap button:hover span.bottom {
  bottom: -60px;
}
.wrap button:hover span.left {
  left: -193px;
}
.wrap button:hover span.right {
  right: -193px;
}
.wrap button:hover span.top {
  top: -60px;
}

Thế là xong, và bây giờ chúng ta đã có thêm một button để có thể sử dụng cho chính trang web hay blog của mình. Đừng quên chia sẻ bài viết cho bạn bè và mọi người đều biết button này nhé.

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

Chuyên Mục: Css

Bài viết được đăng bởi webmaster