Skip to content

Instantly share code, notes, and snippets.

@fiximportant

fiximportant/callback.html

Last active October 23, 2017 06:00
Show Gist options
  • Save fiximportant/00f5d53db8f41f973fb0f1a27c297f16 to your computer and use it in GitHub Desktop.
Save fiximportant/00f5d53db8f41f973fb0f1a27c297f16 to your computer and use it in GitHub Desktop.
Download ZIP
CallBack
Raw
callback.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.b-callback {
position: fixed;
bottom: 10%; right: 5%;
z-index: 999;
width: 70px;
height: 70px;
text-align: center;
color: #fff;
border-radius: 50%;
background-color: #00ade0;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(0, 173, 224, 1);
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}
.b-callback:hover {
-webkit-animation: none;
animation: none;
}
.b-callback a {
display: block;
width: 100%; height: 100%;
}
.b-callback .callback__pulse {
position: relative;
height: inherit;
}
.b-callback .callback__pulse img {
display: block;
position: absolute;
top: 50%; left: 50%;
vertical-align: bottom;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 0 0 0 rgba(0, 173, 224, 0.5);
}
50% {
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
box-shadow: 0 0 0 50px rgba(0, 173, 224, 0.3);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 0 0 0 rgba(0, 173, 224, 0);
}
}
@keyframes pulse {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 0 0 0 rgba(0, 173, 224, 0.5);
}
50% {
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
box-shadow: 0 0 0 50px rgba(0, 173, 224, 0.3);
}
100% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 0 0 0 rgba(0, 173, 224, 0);
}
}
</style>
</head>
<body>
<div class="b-callback">
<a class="js-callback" data-ajaxform="1" data-formname="form_callback_ajax" data-js_max_width="600" href="#">
<div class="callback__pulse"><img src="/files/110/callback.png" alt=""></div>
</a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment