Skip to content

Instantly share code, notes, and snippets.

@k1r8r0wn

k1r8r0wn/index.html

Last active September 2, 2019 08:03
Show Gist options
  • Save k1r8r0wn/684034094d0dddc47154 to your computer and use it in GitHub Desktop.
Save k1r8r0wn/684034094d0dddc47154 to your computer and use it in GitHub Desktop.
Download ZIP
Animated CSS contact-button #css #button
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animated CSS contact-button</title>
<style>
.phone {
position: fixed;
top: 308px;
right: 45%;
left: 45%;
background-color: transparent;
width: 200px;
height: 200px;
cursor: pointer;
z-index: 9999 !important;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
-webkit-transition: visibility .5s;
-moz-transition: visibility .5s;
-o-transition: visibility .5s;
transition: visibility .5s
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
-ms-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translate3d(2000px,0,0);
transform: translate3d(2000px,0,0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes fadeOutRight {
0% { opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0)
}
}
@keyframes fadeOutRight {
0% { opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
-ms-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight
}
.phone { opacity: .6; }
.phone:hover { opacity: 1; }
.circle {
width: 160px;
height: 160px;
top: 20px;
left: 20px;
position: absolute;
background-color: transparent;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
border: 2px solid rgba(30,30,30,.4);
opacity: .1;
-webkit-animation: circle-anim 1.2s infinite ease-in-out;
-moz-animation: circle-anim 1.2s infinite ease-in-out;
-ms-animation: circle-anim 1.2s infinite ease-in-out;
-o-animation: circle-anim 1.2s infinite ease-in-out;
animation: circle-anim 1.2s infinite ease-in-out;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%
}
.phone:hover .circle {
border-color: rgba(0,175,242,1);
opacity: .5;
}
.phone.green:hover .circle {
border-color: rgba(117,235,80,1);
opacity: .5;
}
.phone.green .circle {
border-color: rgba(0,175,242,1);
opacity: .5;
}
.circle-fill {
width: 100px;
height: 100px;
top: 50px;
left: 50px;
position: absolute;
background-color: #000;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
border: 2px solid transparent;
opacity: .1;
-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;
-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;
-ms-animation: circle-fill-anim 2.3s infinite ease-in-out;
-o-animation: circle-fill-anim 2.3s infinite ease-in-out;
animation: circle-fill-anim 2.3s infinite ease-in-out;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%
}
.phone:hover .circle-fill {
background-color: rgba(0,175,242,.5);
opacity: .75 !important;
}
.phone.green:hover .circle-fill {
background-color: rgba(117,235,80,.5);
opacity: .75 !important;
}
.phone.green .circle-fill {
background-color: rgba(0,175,242,.5);
opacity: .75 !important;
}
.img-circle {
width: 60px;
height: 60px;
top: 70px;
left: 70px;
position: absolute;
background: url('http://icons.iconarchive.com/icons/icons8/ios7/256/Mobile-Phone-1-icon.png') center center no-repeat rgba(30,30,30,.1);
background-color: rgba(30,30,30,.1);
background-position: center center;
background-repeat: no-repeat;
background-size: 30px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
border: 2px solid transparent;
opacity: .7;
-webkit-animation: circle-img-anim 1s infinite ease-in-out;
-moz-animation: circle-img-anim 1s infinite ease-in-out;
-ms-animation: circle-img-anim 1s infinite ease-in-out;
-o-animation: circle-img-anim 1s infinite ease-in-out;
animation: circle-img-anim 1s infinite ease-in-out;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.phone:hover .img-circle {
background-color: rgba(0,175,242,1);
}
.phone.green:hover .img-circle {
background-color: rgba(117,235,80,1);
}
.phone.green .img-circle {
background-color: rgba(0,175,242,1);
}
@-moz-keyframes circle-anim {
0% {
-moz-transform: rotate(0deg) scale(0.5) skew(1deg);
opacity: .1;
-moz-opacity: .1;
-webkit-opacity: .1;
-o-opacity: .1;
}
30% {
-moz-transform: rotate(0deg) scale(.7) skew(1deg);
opacity:.5;
-moz-opacity:.5;
-webkit-opacity:.5;
-o-opacity:.5;
}
100% {
-moz-transform: rotate(0deg) scale(1) skew(1deg);
opacity: .6;
-moz-opacity: .6;
-webkit-opacity: .6;
-o-opacity: .1;
}
}
@-webkit-keyframes circle-anim {
0% {
-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);
-webkit-opacity: .1;
}
30% {
-webkit-transform: rotate(0deg) scale(.7) skew(1deg);
-webkit-opacity: .5;
}
100% {
-webkit-transform: rotate(0deg) scale(1) skew(1deg);
-webkit-opacity: .1;
}
}
@-o-keyframes circle-anim{
0%{
-o-transform: rotate(0deg) kscale(0.5) skew(1deg);
-o-opacity: .1;
}
30% {
-o-transform: rotate(0deg) scale(.7) skew(1deg);
-o-opacity: .5;
}
100% {
-o-transform: rotate(0deg) scale(1) skew(1deg);
-o-opacity: .1;
}
}
@keyframes circle-anim{
0% {
transform: rotate(0deg) scale(0.5) skew(1deg);
opacity:.1;
}
30% {
transform: rotate(0deg) scale(.7) skew(1deg);
opacity:.5;
}
100% {
transform: rotate(0deg) scale(1) skew(1deg);
opacity:.1;
}
}
@-moz-keyframes circle-fill-anim {
0% {
-moz-transform: rotate(0deg) scale(0.7) skew(1deg);
opacity:.2;
}
50% {
-moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);
opacity:.2;
}
100% {
-moz-transform: rotate(0deg) scale(0.7) skew(1deg);
opacity:.2;
}
}
@-webkit-keyframes circle-fill-anim {
0% {
-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
opacity: .2;
}
50% {
-webkit-transform: rotate(0deg) scale(1) skew(1deg);
opacity: .2;
}
100% {
-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);
opacity: .2;
}
}
@-o-keyframes circle-fill-anim {
0% {
-o-transform: rotate(0deg) scale(0.7) skew(1deg);
opacity: .2;
}
50% {
-o-transform: rotate(0deg) scale(1) skew(1deg);
opacity: .2;
}
100% {
-o-transform: rotate(0deg) scale(0.7) skew(1deg);
opacity: .2;
}
}
@keyframes circle-fill-anim {
0% {
transform: rotate(0deg) scale(0.7) skew(1deg);
opacity: .2;
}
50% {
transform: rotate(0deg) scale(1) skew(1deg);
opacity: .2;
}
100% {
transform: rotate(0deg) scale(0.7) skew(1deg);
opacity: .2;
}
}
@keyframes circle-img-anim {
0% { transform: rotate(0deg) scale(1) skew(1deg); }
10% { transform: rotate(-25deg) scale(1) skew(1deg); }
20% { transform: rotate(25deg) scale(1) skew(1deg); }
30% { transform: rotate(-25deg) scale(1) skew(1deg); }
40% { transform: rotate(25deg) scale(1) skew(1deg); }
50% { transform: rotate(0deg) scale(1) skew(1deg); }
100% { transform: rotate(0deg) scale(1) skew(1deg); }
}
@-moz-keyframes circle-img-anim {
0% { -moz-transform: rotate(0deg) scale(1) skew(1deg); }
10% { -moz-transform: rotate(-25deg) scale(1) skew(1deg); }
20% { -moz-transform: rotate(25deg) scale(1) skew(1deg); }
30% { -moz-transform: rotate(-25deg) scale(1) skew(1deg); }
40% { -moz-transform: rotate(25deg) scale(1) skew(1deg); }
50% { -moz-transform: rotate(0deg) scale(1) skew(1deg); }
100% { -moz-transform: rotate(0deg) scale(1) skew(1deg); }
}
@-webkit-keyframes circle-img-anim {
0% { -webkit-transform: rotate(0deg) scale(1) skew(1deg); }
10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); }
20% { -webkit-transform:rotate(25deg) scale(1) skew(1deg); }
30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); }
40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); }
50% { -webkit-transform: rotate(0deg) scale(1) skew(1deg); }
100% { -webkit-transform: rotate(0deg) scale(1) skew(1deg); }
}
@-o-keyframes circle-img-anim {
0% { -o-transform: rotate(0deg) scale(1) skew(1deg); }
10% { -o-transform: rotate(-25deg) scale(1) skew(1deg); }
20% { -o-transform: rotate(25deg) scale(1) skew(1deg); }
30% { -o-transform: rotate(-25deg) scale(1) skew(1deg); }
40% { -o-transform: rotate(25deg) scale(1) skew(1deg); }
50% { -o-transform: rotate(0deg) scale(1) skew(1deg); }
100% { -o-transform: rotate(0deg) scale(1) skew(1deg); }
}
</style>
</head>
<body>
<a href="#">
<div class="phone green">
<div class="circle"></div>
<div class="circle-fill"></div>
<div class="img-circle"></div>
</div>
</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment