Анимированная кнопка вызова на сайт
Нужно добавить анимированную кнопку к себе на сайте, по типу этой?
Наш беглый поиск в Инете ничего хорошего не дал. Поэтому решили написать свой. Для того, чтоб у Вас на сайте работала такая кнопка надо совсем немного, чуть больше, чем желание. И так смотрим.
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="bootstrap" />
<script data-require="[email protected]" data-semver="3.3.6" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<!-- /Styles - Remote CDN -->
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 80px;">
<div class="callback-wrapper sticky">
<a href="javascript:void(0);" class="banner callback-sonar" data-toggle="modal" data-target=".callback"></a>
</div>
</div>
</body>
</html>
и немого стилей CSS
/* Styles go here */
a.banner.callback-sonar,a.banner.callback-sonar:link,a.banner.callback-sonar:visited {
display: inline-block;
position: relative;
z-index: 1;
font-family:Cuprum, sans-serif, Arial;
font-size: 0px;
cursor: pointer;
margin: 10px 20px;
width: 60px;
height: 60px;
border-color: transparent;
border-radius: 50%;
text-align: center;
color: #fff;
background: rgba(157,11,14,1.0);
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s
}
.banner.callback-sonar:hover,.banner.callback-sonar:focus .banner.callback-sonar:active {
color: #fff;
background: rgba(157,11,14,0.95);
-webkit-transform: scale(0.95);
-moz-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95)
}
.banner.callback-sonar:before {
font-family: 'FontAwesome';
content: "\f095";
speak: none;
display: block;
font-size: 38px;
line-height: 60px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased
}
.banner.callback-sonar:after {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(157,11,14,0.5);
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 0;
opacity: 0;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-webkit-animation: sonarEffect 1.3s ease-out 75ms infinite;
-moz-animation: sonarEffect 1.3s ease-out 75ms infinite;
animation: sonarEffect 1.3s ease-out 75ms infinite
}
@-webkit-keyframes "sonarEffect" {
0% {
opacity: 0.5;
}
40% {
opacity: 0.7;
box-shadow: 0 0 0 2px rgba(157,11,14,0.7), 0 0 10px 10px #fff, 0 0 0 10px rgba(157,11,14,0.9);
}
100% {
box-shadow: 0 0 0 2px rgba(157,11,14,0.7), 0 0 10px 10px #fff, 0 0 0 10px rgba(157,11,14,0.9);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@-moz-keyframes "sonarEffect" {
0% {
opacity: 0.5;
}
40% {
opacity: 0.7;
box-shadow: 0 0 0 2px rgba(157,11,14,0.7), 0 0 10px 10px #fff, 0 0 0 10px rgba(157,11,14,0.9);
}
100% {
box-shadow: 0 0 0 2px rgba(157,11,14,0.7), 0 0 10px 10px #fff, 0 0 0 10px rgba(157,11,14,0.9);
-moz-transform: scale(1.5);
opacity: 0;
}
}
@keyframes "sonarEffect" {
0% {
opacity: 0.5;
}
40% {
opacity: 0.7;
box-shadow: 0 0 0 2px rgba(157,11,14,0.7), 0 0 10px 10px #fff, 0 0 0 10px rgba(157,11,14,0.9);
}
100% {
box-shadow: 0 0 0 2px rgba(157,11,14,0.7), 0 0 10px 10px #fff, 0 0 0 10px rgba(157,11,14,0.9);
transform: scale(1.5);
opacity: 0;
}
}
Бонус
Если нужен набор вот таких анимированных кнопок.
html
<ul> <li><a href="#" class="round green">Login<span class="round">That is, if you already have an account.</span></a></li> <li><a href="#" class="round red">Sign Up<span class="round">But only if you really, really want to. </span></a></li> <li><a href="#" class="round yellow">Demo<span class="round">Take a look. This product is totally rad!</span></a></li> </ul>
css
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 13px;
text-align: center;
background: #333 url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png');
}
ul {
margin: 30px auto;
text-align: center;
}
li {
list-style: none;
position: relative;
display: inline-block;
width: 100px;
height: 100px;
}
@-moz-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@-webkit-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@-o-keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
.round {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 30px;
text-decoration: none;
text-align: center;
font-size: 25px;
text-shadow: 0 1px 0 rgba(255,255,255,.7);
letter-spacing: -.065em;
font-family: "Hammersmith One", sans-serif;
-webkit-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
box-shadow: 2px 2px 7px rgba(0,0,0,.2);
border-radius: 300px;
z-index: 1;
border-width: 4px;
border-style: solid;
}
.round:hover {
width: 130%;
height: 130%;
left: -15%;
top: -15%;
font-size: 33px;
padding-top: 38px;
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
box-shadow: 5px 5px 10px rgba(0,0,0,.3);
z-index: 2;
border-size: 10px;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
a.red {
background-color: rgba(239,57,50,1);
color: rgba(133,32,28,1);
border-color: rgba(133,32,28,.2);
}
a.red:hover {
color: rgba(239,57,50,1);
}
a.green {
background-color: rgba(1,151,171,1);
color: rgba(0,63,71,1);
border-color: rgba(0,63,71,.2);
}
a.green:hover {
color: rgba(1,151,171,1);
}
a.yellow {
background-color: rgba(252,227,1,1);
color: rgba(153,38,0,1);
border-color: rgba(153,38,0,.2);
}
a.yellow:hover {
color: rgba(252,227,1,1);
}
.round span.round {
display: block;
opacity: 0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font-size: 1px;
border: none;
padding: 40% 20% 0 20%;
color: #fff;
}
.round span:hover {
opacity: .85;
font-size: 16px;
-webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-moz-text-shadow: 0 1px 1px rgba(0,0,0,.5);
-o-text-shadow: 0 1px 1px rgba(0,0,0,.5);
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.green span {
background: rgba(0,63,71,.7);
}
.red span {
background: rgba(133,32,28,.7);
}
.yellow span {
background: rgba(161,145,0,.7);
}
(Оригинал тут: codepen.io/sethabbott/pen/FtuLz)