SHARE BUTTON DOWNLOAD ĐƠN GIẢN NHƯNG CHẤT

Share Copy URL

Xin chào tất cả các bạn đã đến với blog của mình . Hôm qua khi lục lọi css của mấy template thì mình tình cờ thấy một cái button ,nhìn nó cũng khá đẹp nên mình sẽ đem share cho anh em

CÁC BƯỚC THỰC HIỆN: Rất đơn giản; bạn chỉ cần thêm đoạn css này vào trước thẻ </b:skin>:

/* Nguyendien Download */
.buttonDownload-ltd {
border-radius: 3px;
display: inline-block;
position: relative;
padding: 10px 25px;
background-color: #49ACE1;
color: white !important;
font-weight: 500;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
transition:all 0.4s;
-moz-transition:all 0.4s;
-webkit-transition:all 0.4s;
}
.buttonDownload-ltd:before, .buttonDownload-ltd:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
.buttonDownload-ltd:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
.buttonDownload-ltd:after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
animation: downloadArrow 2s linear infinite;
animation-play-state: paused;
}
.buttonDownload-ltd:hover:after {
animation-play-state: running;
}
@keyframes downloadArrow {
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}

Để sử dụng thì ta dùng đoạn code sau :

<center>
<a class="buttonDownload-ltd" href="https://www.facebook.com/">DEMO</a></center>

Thế là đã xong. và đây là thành quả chúng ta đạt được:

DEMO