<div id="back_to_top" class="show scroll">
<div class="container relative">
<a href="#"><i class="ic ic-angle-up-white"></i></a>
</div>
</div>
.relative {
position: relative;
}
#back_to_top {
position: fixed;
left: 0;
bottom: -90px;
width: 100%;
height: 0px;
box-shadow: 0 0 0 50px transparent;
opacity: 0;
outline: none;
transition: all 0.4s ease-in-out;
z-index: 1000;
&.show {
bottom: 0;
box-shadow: 0 0 0 0 #2e93cd;
opacity: 1;
}
&.scroll {
a {
opacity: 1;
}
}
a {
position: absolute;
right: 0;
bottom: 25px;
width: 60px;
height: 60px;
line-height: 56px;
border-radius: 60px;
box-shadow: 0 0 0 10px transparent;
text-align: center;
background-color: #2e93cd;
color: #fff;
opacity: 0.8;
transition: all 0.4s ease-in-out;
&:hover {
box-shadow: 0 0 0 0 #669;
background-color: #669;
opacity: 1;
}
}
}
scroll top button html css
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.