Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo 3D Button Và 22 Ví dụ Thực Tế Cho Trang Web

Cách Tạo 3D Button Và 22 Ví dụ Thực Tế Cho Trang Web


Ngày 10 Tháng 8 Năm 2020

Bài viết hôm nay chúng ta sẽ đi vào cùng nhau tìm hiểu cách tạo 3D button để làm tăng tính thẩm mỹ cũng như thu hút sự chú ý của người dùng đối với trang web của bạn nhé!

Cách Tạo 3D Button HTML CSS Cho Trang Web

Việc đầu tiên chúng ta cần làm là tạo cấu trúc HTML cho 3D button như đoạn mã sau đây nhé:

HTML

 <button class="button_3d">Niềm Vui Lập Trình</button>

Việc tiếp theo là chúng ta sẽ sử dụng thuộc tính box-shadow trong CSS để làm button như được hiển thị dưới dạng 3D nhé.

CSS

button {
     padding:35px;
     margin: 0;
     width:350px;
     font-size:30px;
     font-weight:bold;
     color:#FFF;
   }
  button:active {
     outline:none;
   }
  button:focus {
     outline:none;
   }
  .button_3d {
     transition: margin-top 0.3s ease,
     margin-left 0.3s ease,
     box-shadow 0.3s ease;
     background:#03A9F4;
     border: solid 1px #1976D2;
     box-shadow: 1px 0px 0px #1976D2,0px 1px 0px #1976D2,
   2px 1px 0px #1976D2,1px 2px 0px #1976D2,
   3px 2px 0px #1976D2,2px 3px 0px #1976D2,
   4px 3px 0px #1976D2,3px 4px 0px #1976D2,
   5px 4px 0px #1976D2,4px 5px 0px #1976D2,
   6px 5px 0px #1976D2,5px 6px 0px #1976D2,
   7px 6px 0px #1976D2,6px 7px 0px #1976D2,
   8px 7px 0px #1976D2,7px 8px 0px #1976D2,
   9px 8px 0px #1976D2,8px 9px 0px #1976D2;
   }
  .button_3d:active{
     transition: margin-top 0.3s ease,
     margin-left 0.3s ease,
     box-shadow 0.3s ease;
     margin-left:10px;
     margin-top:10px;
     box-shadow: 0px 0px 0px #1976D2,0px 0px 0px #1976D2,   0px 0px 0px #1976D2,0px 0px 0px #1976D2;
   }

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

See the Pen 3d button by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Các Ví 3D Button Khác Cho Website

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 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.

Thiết Kế 3D Gradient Button

3D Gradient Button

Kết quả bạn xem bên dưới nhé!

See the Pen 3D Gradient Buttons by Sietse (@firepenguin) on CodePen.

Nguồn

Thiết Kế 3D Button Jquery

3D Button Jquery

Kết quả bạn xem bên dưới nhé!

See the Pen 3d Button with +/- transform by Christos Hrousis (@christoshrousis) on CodePen.

Nguồn

Thiết Kế Hiệu Ứng 3D Button CSS

Hiệu Ứng 3D Button CSS

Kết quả bạn xem bên dưới nhé!

See the Pen 3D Buttons by Rafaël De Jongh (@RafaelDeJongh) on CodePen.

Nguồn

Thiết Kế 3D Button CSS Flat UI

3D Button CSS Flat UI

Kết quả bạn xem bên dưới nhé!

See the Pen Button 3d , Css , Flat UI Color by Ahmed Kamal (@Ahmedkamal) on CodePen.

Nguồn

Thiết Kế 3D Button Hover Effect

3D Button Hover Effect

Kết quả bạn xem bên dưới nhé!

See the Pen Perspective button hover effect by Comehope (@comehope) on CodePen.

Nguồn

Thiết Kế 3D Button Effect

3D Button Effect

Kết quả bạn xem bên dưới nhé!

See the Pen 3d button effect by drus unlimited (@drus) on CodePen.

Nguồn

Thiết Kế Javascript 3D Button

Javascript 3D Button

Kết quả bạn xem bên dưới nhé!

See the Pen 3D buttons with Glare by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế CSS 3D Button

CSS 3D Button

Kết quả bạn xem bên dưới nhé!

See the Pen 3D Button by Marlon Lulgjuraj (@screenthink) on CodePen.

Nguồn

Tạo Hiệu Ứng Hover 3D Button Rotate

Hover 3D Button Rotate

Kết quả bạn xem bên dưới nhé!

See the Pen 3D Button Rotate on Hover by Gabriele Corti (@borntofrappe) on CodePen.

Nguồn

Thiết Kế 3D Button CSS

3D Button CSS

Kết quả bạn xem bên dưới nhé!

See the Pen 3D Button by Tom Wilson (@tomwilson) on CodePen.

Nguồn

Thiết Kế CSS3 3D Button

CSS3 3D Button

Kết quả bạn xem bên dưới nhé!

See the Pen 3D Button by lloydwheeler (@lloydwheeler) on CodePen.

Nguồn

Thiết Kế 3D Button Đẹp Bằng Javascript

3D Button Đẹp Bằng Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen 3D button by Robin Delaporte (@robin-dela) on CodePen.

Nguồn

Thiết Kế 3D Button Submit CSS

3D Button Submit CSS

Kết quả bạn xem bên dưới nhé!

See the Pen "3D" Animated Buttons by Jonas Sandstedt (@sandstedt) on CodePen.

Nguồn

Thiết Kế 3D Button Với Shadow CSS

3D Button Với Shadow CSS

Kết quả bạn xem bên dưới nhé!

See the Pen 3d Button by Michael McMillan (@MikeMcChillin) on CodePen.

Nguồn

Thiết Kế 3D Button Social

3D Button Social

Kết quả bạn xem bên dưới nhé!

See the Pen 3D Social Media Animated Links by Austin Dudas (@austin_dudas) on CodePen.

Nguồn

Thiết Kế 3D Button Gradient Shadow

3D Button Gradient Shadow

Kết quả bạn xem bên dưới nhé!

See the Pen Button with gradient shadow by Mohsen Khakbiz (@Mohsen-Khakbiz) on CodePen.

Nguồn

Thiết Kế Metallic Glossy 3D Button

Metallic Glossy 3D Button

Kết quả bạn xem bên dưới nhé!

See the Pen Metallic glossy 3d button effects by Comehope (@comehope) on CodePen.

Nguồn

Thiết Kế 3D Button Border CSS

3D Button Border CSS

Kết quả bạn xem bên dưới nhé!

See the Pen 3d button wireframed look by jesper landberg (@ReGGae) on CodePen.

Nguồn

Thiết Kế 3D Button Với Background Color CSS

3D Button Với Background Color CSS

Kết quả bạn xem bên dưới nhé!

See the Pen 3d Button by Piet (@pietvanzoen) on CodePen.

Nguồn

Tổng Hợp Các Hiệu Ứng Hover 3D Button

Hiệu Ứng Hover 3D Button

Kết quả bạn xem bên dưới nhé!

See the Pen 3D Buttons by Dronca Raul (@rauldronca) on CodePen.

Nguồn

Click 3D Button Effect

Click 3D Button Effect

Kết quả bạn xem bên dưới nhé!

See the Pen Adjustable Height 3D Button in em's by Colin (@cmcg) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những 3D Button hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!