CSS3 đã được giới thiệu cách đây không lâu nhưng lợi ích mà nó mang lại cho ngành lập trình web là rất lớn, có nhiều giao diện mới được phát hành dựa trên HTML5 và CSS3, bài viết này mình sẽ hướng dẫn cho bạn cách tạo nút 3D bằng CSS3.

Hoc CSS

Bên trên là hình ảnh demo cho bạn kết quả cuối cùng mà bạn sẽ đạt được sau khi bạn hoàn thành xong bài viết hướng dẫn này. Đầu tiên thì bạn hãy tạo một tập tin .html hoặc .php gì đó cũng được, tùy vào sở thích của bạn mà tạo nhé. Bên trong thẻ body bạn sẽ khai báo một vài nút cơ bản, cụ thể trong bài viết này mình sẽ đăng 4 nút với 4 màu khác nhau.

<div class=“button-container”>
<div class=“button-container-inner wrap”>
<ul>
<li>
<ahref=“#”class=“button orange”>Đặtmua</a>
</li>
<li>
<ahref=“#”class=“button light-blue”>Chi tiết</a>
</li>
<li>
<ahref=“#”class=“button purple”>Nútmàutím</a>
</li>
<li>
<ahref=“#”class=“button clickable dark-red”>Nútclickđược</a>
</li>
</ul>
</div>
</div>

Tiếp đến trong tập tin .css của bạn hãy khai báo một vài thông tin cần thiết để hiển thị màu nền của khung demo. Trong tập tin css này cũng sẽ bao gồm những thuộc tính được khai báo để hiển thị các nút theo kiểu 3D.

ulli{
display:inlineblock;
marginright:20px;
}
 
.buttoncontainer{
background:#8bcdda;
background:mozradialgradient(center,ellipse cover,#a4d0d3 0,#257fa1 100%);
background:webkitgradient(radial,center center,0,center center,100%,colorstop(0,#a4d0d3),color-stop(100%,#257fa1));
background:webkitradialgradient(center,ellipse cover,#a4d0d3 0,#257fa1 100%);
background:oradialgradient(center,ellipse cover,#a4d0d3 0,#257fa1 100%);
background:msradialgradient(center,ellipse cover,#a4d0d3 0,#257fa1 100%);
background:radialgradient(ellipse at center,#a4d0d3 0,#257fa1 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#a4d0d3’,endColorstr=‘#257fa1’,GradientType=1);
position:relative;
minheight:500px;
}
 
.buttoncontainerinner{
marginbottom:0;
marginleft:auto;
marginright:auto;
paddingtop:10%;
}
 
.button{
border:0none;
borderradius:5px;
color:#FFFFFF;
display:inlineblock;
fontsize:34px;
fontweight:700;
lineheight:27px;
marginbottom:0;
margintop:0;
minwidth:170px;
padding:23px14px;
textalign:center;
textdecoration:none;
textshadow:01px0#C26900;
}
 
.button.orange{
backgroundcolor:#FF910F;
boxshadow:05px0#DB7700;
}
 
.button.orange:hover{
webkitboxshadow:05px0#db7700,0 0 40px #fff;
mozboxshadow:05px0#db7700,0 0 40px #fff;
boxshadow:05px0#db7700,0 0 40px #fff;
background:#ffa81e
}
 
.button.purple{
backgroundcolor:#994c66;
boxshadow:05px0#7a3c51;
}
 
.button.purple:hover{
webkitboxshadow:05px0#7a3c51,0 0 40px #fff;
mozboxshadow:05px0#7a3c51,0 0 40px #fff;
boxshadow:05px0#7a3c51,0 0 40px #fff;
background:#a35d75
}
 
.button.lightblue{
backgroundcolor:#369FE0;
boxshadow:05px0#208BCE;
textshadow:01px0#208BCE;
}
 
.button.lightblue:hover{
backgroundcolor:#4da7de;
mstransition:all.2seaseout;
webkittransition:all.2seaseout;
moztransition:all.2seaseout;
otransition:all.2seaseout;
transition:all.2seaseout;
webkitboxshadow:05px0#208bce,0 0 40px #fff;
mozboxshadow:05px0#208bce,0 0 40px #fff;
boxshadow:05px0#208bce,0 0 40px #fff
}
 
/* ======================= NUT CO THE CLICK CHUOT DUOC ======================= */
 
.button.clickable{
border:none;
borderbottom:3pxsolid#b93207;
textdecoration:none;
}
 
.button.clickable:focus,.button.clickable:hover{
outline:none;
}
 
.button.clickable:active{
border:none;
}
 
.button.clickable.darkred{
background:#e05d22; /* Old browsers */
background:webkitlineargradient(top,#e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
background:lineargradient(tobottom,#e05d22 0%, #d94412 100%); /* W3C */
}
 
.button.clickable.darkred:focus,.button.clickable.darkred:hover{
background:#ed6a31; /* Old browsers */
background:webkitlineargradient(top,#ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */
background:lineargradient(tobottom,#ed6a31 0%, #e55627 100%); /* W3C */
}
 
.button.clickable.darkred:active{
background:#d94412; /* Old browsers */
background:webkitlineargradient(top,#d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */
background:lineargradient(tobottom,#d94412 0%, #e05d22 100%); /* W3C */
bordertop:3pxsolid#b93207;
}

Thuộc tính .button với những khai báo chung cho tất cả các nút, đối với các thuộc tính có kèm thêm màu là khai báo tùy biến để hiển thị màu sắc khác nhau cho các nút khác nhau.

ĐỂ LẠI PHẢN HỒI CỦA BẠN TẠI ĐÂY

Phản hồi về bài viết này

NO COMMENTS

LEAVE A REPLY


*