How to 3D button with css Dropshadow

Hôm nay tôi sẽ chia sẽ cho các bạn Button 3D được tạo bằng dropshadow, tôi đã sử dụng shadow để mô phỏng hiệu ứng 3D và cũng thêm một số hiệu ứng đẹp trong css, bài viết này gồm có 5 nút thể hiện khác nhau, mỗi nút có một kiểu riêng biệt, nếu bạn cảm thấy cái nào hợp lý thì nên sử dụng nó, nhưng hãy thay đổi màu sắc nếu bạn muốn.

Button 1. Mình sẽ tạo một button ở dạng bình thường( button default)

CSS

button {
/* */
position:relative;
padding:35px;
margin:30px;
width:350px;
/* Font Styling */
font-size:30px;
font-weight:bold;
color:#FFF;
}

HTML

<button>Button 3D</button>

Hình ảnh:

Button 2. Button with Drop Shadow On the bottom

Trường hợp này shadow sẽ hiện thị ở dưới cùng, hiệu ứng botton đổ bóng này được nhiều người dùng.
CSS

.down {
-webkit-transition: margin-top 0.3s ease, box-shadow 0.3s ease ;
-moz-transition: margin-top 0.3s ease, box-shadow 0.3s ease;
transition: margin-top 0.3s ease, box-shadow 0.3s ease;
background:#1abc9c;
border: solid 1px #16a085;
-webkit-box-shadow: 0px 9px 0px #16a085;
-moz-box-shadow: 0px 9px 0px #16a085;
box-shadow: 0px 9px 0px #16a085;
}
.down:active{
-webkit-transition: margin-top 0.2s ease, box-shadow 0.2s ease;
-moz-transition: margin-top 0.2s ease, box-shadow 0.2s ease;
transition: margin-top 0.2s ease, box-shadow 0.2s ease;
margin-top:9px;
-webkit-box-shadow: 0px 0px 0px #16a085;
-moz-box-shadow: 0px 0px 0px #16a085;
box-shadow: 0px 0px 0px #16a085;
}

down:active thể hiện khi các bạn click button nó sẽ thay đổi màu sắc cũng như hiện thị shawdow in button.

HTML

<button class="down">3D botton</button>

Hình ảnh:

Button 3D 3. Button with Drop Shadow On the Right (Dang button này các bạn có thể xem hinh như dưới)

Để có hiệu ứng 3D button right, tất cả những gì chúng ta cần làm là thay đổi các giá trị bóng hộp, từ box-Shadow: 0px 9px 0px # 16a085; đến hộp bóng: 9px 0px 0px # 8e44ad;
CSS

.right {
background:#9b59b6;
border: solid 1px #8e44ad;
-webkit-box-shadow: 9px 0px 0px #8e44ad;
-moz-box-shadow: 9px 0px 0px #8e44ad;
box-shadow: 9px 0px 0px #8e44ad;
-webkit-transition: margin-left 0.2s ease, box-shadow 0.2s ease;
-moz-transition: margin-left 0.2s ease, box-shadow 0.2s ease;
transition: margin-left 0.2s ease, box-shadow 0.2s ease;
}
.right:active{
margin-left:9px;
-webkit-transition: margin-left 0.2s ease, box-shadow 0.2s ease;
-moz-transition: margin-left 0.2s ease, box-shadow 0.2s ease;
transition: margin-left 0.2s ease, box-shadow 0.2s ease;
-webkit-box-shadow: 0px 0px 0px #8e44ad;
-moz-box-shadow: 0px 0px 0px #8e44ad;
box-shadow: 0px 0px 0px #8e44ad;
}

HTML

<button class="right">3D botton</button>

Hình ảnh:

Button 4. Button with Drop Shadow On the Right and Bottom

Để có hiệu ứng button đẹp trong css bạn có thể thực hiện và thay đổi các shadow và các màu sắc đổ bóng, với button ở dạng shadow right and bottom thì các bạn có thể sử dụng css và html ở dưới.
CSS

.rightBottom {
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;
}
.rightBottom:active{
transition: margin-top 0.3s ease;
margin-left 0.3s ease,
box-shadow 0.3s ease;
margin-left:9px;
margin-top:9px;
box-shadow: 0px 0px 0px #1976D2;
}

HTML

<button class="rightBottom">3D botton</button><br/>

Hình ảnh:

Button 5. Button with Drop Shadow On the Left and Top

CSS

.leftTop {
transition: margin-top 0.3s ease,
margin-left 0.3s ease,
box-shadow 0.3s ease;
background:#4CAF50;
border: solid 1px #388E3C;
box-shadow: -1px -0px 0px #388E3C,-0px -1px 0px #388E3C,
-2px -1px 0px #388E3C,-1px -2px 0px #388E3C,
-3px -2px 0px #388E3C,-2px -3px 0px #388E3C,
-4px -3px 0px #388E3C,-3px -4px 0px #388E3C,
-5px -4px 0px #388E3C,-4px -5px 0px #388E3C,
-6px -5px 0px #388E3C,-5px -6px 0px #388E3C,
-7px -6px 0px #388E3C,-6px -7px 0px #388E3C,
-8px -7px 0px #388E3C,-7px -8px 0px #388E3C,
-9px -8px 0px #388E3C,-8px -9px 0px #388E3C;
}
.leftTop: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 #388E3C;
}

HTML

<button class="leftTop">3D botton</button>

Hình ảnh:

Lưu ý: Các bạn có thể thay đổi màu sắc theo ý muốn của bạn nhé, box-shadow button bạn cũng có thể thay đổi, đây là bản demo của mình, các bạn có thể thực hiện online ở dưới đây.
Tags: Creating a 3D Button in CSS3,button css beautiful, hiệu ứng 3d button, button shadow, css efect animation button,button 3d css, button 3d css codepen,how to make 3d button in css