<style>
@import url('[url]https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i'[/url]);
body {
background:#353535;
display:flex;
font-family: 'Open Sans', sans-serif;
width: 100%;
height: 100%;
position:fixed;
}
.download-btn {
cursor: pointer;
padding: 20px 80px;
border-radius: 60px;
border: none;
background: #2196F3;
position: relative;
color: #fff;
font-size: 17px;
font-weight: 500;
letter-spacing: 1.2px;
transition: all 0.2s;
margin: auto;
font-family: 'Open Sans', sans-serif;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fe7550), to(#ff3339));
background-image: linear-gradient(to bottom, #fe7550 0%, #ff3339 100%);
font-weight: 500;
overflow: hidden;
box-shadow: 0px 2px 34px #fe6a4cd1;
border: double 2px #ca9894;
}
button:focus {
outline:none;
}
.download-btn:hover {
transition:all 0.2s;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#48aeef+0,816ddb+100 */
background-image: -webkit-gradient(linear, left top, left bottom, from(#fe7550), to(#ff3339));
background-image: linear-gradient(to left, #fe7550 -1%, #ff3339 80%)
}
.icon{
display: block;
position: absolute;
}
.icon {
display: block;
position: absolute;
width: 100%;
left: 0;
right: 0;
margin: auto;
text-align: center;
transition: all 0.4s;
transform: translateY(30px);
font-size:40px;
}
.download-btn:hover .main-text {
display: block;
transform: translateY(-70px);
transition: all 0.2s linear;
}
.main-text {
transition: all 0.2s;
display:block;
}
.download-btn:hover .icon {
transition: all 0.4s;
transform: translateY(-40px);
}
.size {
background: #ffffff;
height: 50px;
line-height: 50px;
padding: 0 20px;
position: absolute;
left: -1px;
right: 0;
margin: auto;
width: 95px;
top: 50%;
bottom: 0;
margin-top: -135px;
color: #353535;
font-size: 14px;
text-align: center;
}
.size::after {
position: absolute;
content: '';
border-top: solid 10px white;
border-bottom: solid 10px transparent;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
bottom: -19px;
left: 20px;
right: 0;
width: 1px;
}
.size {
background: #ffffff;
height: 50px;
line-height: 50px;
padding: 0 20px;
position: absolute;
left: -1px;
right: 0;
margin: auto;
width: 95px;
top: 50%;
bottom: 0;
margin-top: -135px;
color: #353535;
font-size: 14px;
text-align: center;
transition: all 0.3s;
transform: translateY(40px);
opacity: 0;
}
.download-btn:hover + .size {
opacity:1;
transition: all 0.3s;
transform: translateY(20px);
}
</style>
<button class="download-btn"> <span class="main-text">Download</span> <span class="icon"><i class="fa fa-cloud-download" aria-hidden="true"></i></span> </button>
<div class="size">
file Size : 2 MB
</div>
พัฒนาเว็บไซต์
