Back to top button

add back to top button to your blog

by Hm Ba

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<body>
    
<h3><a href='http://www.ar1web.com/2014/11/simple-css-button.html' target="_blank"> عودة لتدوينة</a></h3>
<div class='clear'/>    
<div id='content'>
<div class="whitebuttondemo">
<a href="http://www.ar1web.com" target="_blank">معاينة</a><br>
<span class="up">إضغط للمشاهدة</span></div>
<br>
<div class="whitebutton">
    <a href="http://www.ar1web.com" target="_blank">تحميل مباشر</a><br>
<span class="up">إضغط للبدء</span><br>
<span class="down">2.3MB .rar</span></div>
</body>

CSS

body{background:#f5f5f5;
    margin:0 0 0 0;
    padding:0 0 0 0;
}
h3 {
font-size: 20px;
font-weight: 400;
    font-family:ge_dinar_tworegular;
text-align: center;
padding: 15px;
margin: 15px auto;
background: #F25050;
border-bottom: 2px solid #DA4444;
border-radius: 3px 3px 5px 5px;
color: #fff;
width: 200px;
box-shadow: 0 0 3px #e5e5e5;
transition: all 0.5s ease-in-out;
}
h3 a {
color: #FFF;
text-decoration: none;
}
h3:hover {
 background: #DA4444; transition: all 0.5s ease-in-out;  
}
/* CSS Simple Butn Ar1web */
.whitebutton {margin: 20px auto;padding: 20px 0;width: 200px;}
.whitebutton a {background: #fff;color: #666;display: block;font-size: 17px;font-weight: 700;font-family: Electrolize,ge_ss_tvbold;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;cursor: url(http://2.bp.blogspot.com/-IJ8uMvhlKVU/VFDoIGDIn3I/AAAAAAAAGio/K2vVTU7nX84/s320/chm.png),pointer
}
.whitebutton a:before {content: '\f019';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-right: 6px;}
.whitebutton span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebutton .up {background: #34B4E2;margin: -25px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down {margin: -30px auto;opacity: 0;border-radius: 5px 5px 0 0;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down:before {content:'\f14a';font-family: FontAwesome;font-weight: normal;margin-right: 6px;color: #aaa;}
.whitebutton:hover .up {opacity: 1;transform: translate(0,0);}
.whitebutton:hover .down {opacity: 1;transform: translate(0,-90px);}
.whitebuttondemo {margin: 20px auto;padding: 20px 0;width: 200px;}
.whitebuttondemo a {background: #34B4E2;color: #fff;display: block;font-size:...