plumes
Version:
Flying-fast Metro future vision components
80 lines (79 loc) • 1.97 kB
CSS
@-webkit-keyframes pl-button-rounded-show {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes pl-button-rounded-show {
0% {
-moz-transform: scale(0);
}
100% {
-moz-transform: scale(1);
}
}
@-ms-keyframes pl-button-rounded-show {
0% {
-ms-transform: scale(0);
}
100% {
-ms-transform: scale(1);
}
}
@-o-keyframes pl-button-rounded-show {
0% {
-o-transform: scale(0);
}
100% {
-o-transform: scale(1);
}
}
@keyframes pl-button-rounded-show {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.pl-button-rounded {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
width: 4rem;
height: 4rem;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
border: none;
padding: 0;
margin: 0;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
-webkit-animation: pl-button-rounded-show 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
-moz-animation: pl-button-rounded-show 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
-ms-animation: pl-button-rounded-show 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-animation: pl-button-rounded-show 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
animation: pl-button-rounded-show 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
-moz-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
-ms-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pl-button-rounded i {
font-size: 2rem;
line-height: 4rem;
vertical-align: middle;
}