Tạo hiệu ứng nút nhấn 3D (How to button 3D effect) CSS

Xin chào mọi người hôm nay mình sẽ trình bày một bài viết về CSS thật là thú vị dành cho người đang tìm kiếm cách tạo hiệu ứng nút nhất trong css, để làm được vấn đề này thì bước đầu tiên bạn phải đặt ra yêu cầu cho bản thân hoặc của khách hàng về màu sắc, color text, backgroud -color box-showdown.

Button 3D effect là một loại hiệu ứng dụng đổ màu, nó có thể dùng cho các sự kiện khác ngoài button như thẻ a và nhiều thể khác, nếu nó có thể bắt được sự kiện click.
Các bạn hãy coppy dòng lệnh css dưới đây và file css hoặc bạn có thể để trong <style></style>

.button {
  position: relative;
  background-color: #9E9E9E;
  -webkit-border-radius: 10px;
  border: none;
  border-radius: 10px;
  -webkit-box-shadow: 0px 8px 0px #878787, 0px 8px 20px #000000;
  box-shadow: 0px 8px 0px #878787, 0px 8px 20px #000000;
  color: #FFFFFF;
  display: inline-block;
  font-size: 34px;
  padding: 2px 10px;
  text-align: center;
cursor:pointer;
  text-decoration: none;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.button:active {
  -webkit-box-shadow: 0px 2px 0px #878787, 0px 2px 8px #000000;
  box-shadow: 0px 2px 0px #878787, 0px 2px 8px #000000;
  top: 7px;
}

Trong đoạn css trên nếu bạn cần muốn thay đổi màu sắc (background css), color text css thì bạn có thể tìm kiếm màu sắc tại trang tienanhvn để xem màu sắc một cách hợp lý nhất.
Để thực hiện được các bạn cần thêm một đoạn lệnh html này vào trong file html để xem kết quả nhé.

<a class="button">Tienanhvn.blogspot.com</a>

Ví dụ: