Download Button Flat Style & Hover Effect 2019

Hello anh em :D , chào mừng quay lại với Star Nhân IT, ở bài viết này mình sẽ chia sẻ cho anh em một Style button download mới, style này được mình chôm chỉa trên CodePen.Io, button này có hiệu ứng kha khá giống với các style download button của web lưu trữ file mà chúng ta thường hay sử dụng.

How to add Download Button to Blogspot ?

Đầu tiên bạn thêm đoạn css sau vào trước thẻ đóng </head> :

<style class='cp-pen-styles'>
/* Button Download By VoHuuNhan */
.nhanbutton a {
background:#ffffff;
border:solid 1px #e6e6e6;
border-radius:2px;
display:inline-block;
height:100px;
line-height:100px;
margin:5px;
position:relative;
text-align:center;
vertical-align:middle;
width:100px;
}
.nhanbutton a span {
background:#f2594b;
border-radius:4px;
color:#ffffff;
display:inline-block;
font-size:11px;
font-weight:700;
line-height:normal;
padding:5px 10px;
position:relative;
text-transform:uppercase;
z-index:1;
}
.nhanbutton a span:last-child {
margin-left:-20px;
}
.nhanbutton a:before,
.nhanbutton a:after {
background:#ffffff;
border:solid 3px #9fb4cc;
border-radius:4px;
content:'';
display:block;
height:35px;
left:50%;
margin:-17px 0 0 -12px;
position:absolute;
top:50%;

width:25px;
}
.nhanbutton a:hover:before,
.nhanbutton a:hover:after {
background:#e2e8f0;
}

.nhanbutton a:before {
margin:-23px 0 0 -5px;
}
.nhanbutton a:hover {
background:#e2e8f0;
border-color:#9fb4cc;
}
.nhanbutton a:active {
background:#dae0e8;
box-shadow:inset 0 2px 2px rgba(0,0,0,.25);
}
.nhanbutton a span:first-child {
display:none;
}
.nhanbutton a:hover span:first-child {
display:inline-block;
}
.nhanbutton a:hover span:last-child {
display:none;
}
</style>

Lưu Theme Lại, Muốn Thêm Button Khi Viết Bài Thì Bạn Tiến Hành Chuyển Qua Chế Độ Soạn Thảo HTML Sau Đó Paste Code Này Vào Và Chỉnh Sửa Theo Ý Muốn Của Bạn :

<center>
<div class="nhanbutton">
<a href="https://drive.google.com/file/d/1w3Kp7V44JHG1ZMIPpvqdpZIWP1uez9jQ/view"><span>Download</span><span>Evomagz.xml</span></a>
</div></center>

Vậy là xong, chúc các bạn thành công !