<h1>PLAYING</h1>
<div class="btn-play active">
<div class="pulse"></div>
<div class="orbiter"></div>
</div>
<h1>STOP</h1>
<div class="btn-play">
<div class="orbiter"></div>
</div>
@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
background: #111 url(https://codepen.io/images/classy_fabric.png);
font-family: "Oswald", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
font-size: 14px;
line-height: 1.4;
color: white;
text-align: center;
padding-top: 50px;
}
h1 {
letter-spacing: 0.5em;
text-shadow: 1px 1px #000;
}
.btn-play {
position: relative;
left: -8px;
width: 38px;
height: 38px;
display: inline-block;
border: 3px solid #33a303;
border-radius: 22px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8e443), color-stop(100%,#33a303));
background: -webkit-linear-gradient(top, #a8e443 0%,#33a303 100%);
background: -moz-linear-gradient(top, #a8e443 0%,#33a303 100%);
background: -o-linear-gradient(top, #a8e443 0%,#33a303 100%);
background: -ms-linear-gradient(top, #a8e443 0%,#33a303 100%);
background: linear-gradient(top, #a8e443 0%,#33a303 100%);
-webkit-box-shadow: 0px 0px 30px rgba(255,255,255, 0.5);
box-shadow: 0px 0px 30px rgba(255,255,255, 0.5);
-webkit-animation: pulseShadow 1s infinite linear;
-moz-animation: pulseShadow 1s infinite linear;
-ms-animation: pulseShadow 1s infinite linear;
-o-animation: pulseShadow 1s infinite linear;
animation: pulseShadow 1s infinite linear;
}
.btn-play::after {
content: "";
display: block;
position: absolute;
left: 16px;
top: 9px;
border-bottom: 10px solid transparent;
border-right: 10px solid transparent;
border-left: 10px solid rgba(255, 255, 255, .85);
border-top: 10px solid transparent;
}
.btn-play.active::after {
left: 12px;
top: 12px;
border-bottom: 7px solid rgba(255, 255, 255, .85);
border-right: 7px solid rgba(255, 255, 255, .85);
border-left: 7px solid rgba(255, 255, 255, .85);
border-top: 7px solid rgba(255, 255, 255, .85);
}
.btn-play.active .orbiter {
display: block;
position: absolute;
z-index: 0;
top: 19px;
left: 19px;
border-radius: 90%;
background: transparent;
-webkit-animation: rotater 2s infinite linear;
-moz-animation: rotater 2s infinite linear;
-ms-animation: rotater 2s infinite linear;
-o-animation: rotater 2s infinite linear;
animation: rotater 2s infinite linear;
-webkit-box-shadow: 0em 1.3em 0.1em 0.20em #fff, 0.2em 1.3em 0.1em 0.20em #fff, 0em 1.3em 0.5em 0.45em #a8e443 , 0.2em 1.3em 0.5em 0.45em #a8e443;
box-shadow: 0em 1.3em 0.1em 0.20em #fff, 0.2em 1.3em 0.1em 0.20em #fff, 0em 1.3em 0.5em 0.45em #a8e443 , 0.2em 1.3em 0.5em 0.45em #a8e443;
}
.active .pulse {
border: 10px solid #fff601;
background: transparent;
border-radius: 60px;
height: 60px;
width: 60px;
-webkit-animation: pulse 1500ms ease-out;
-moz-animation: pulse 1500ms ease-out;
-ms-animation: pulse 1500ms ease-out;
-o-animation: pulse 1500ms ease-out;
animation: pulse 1500ms ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
top: -21px;
left: -21px;
z-index: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
@keyframes "rotater" {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotater {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes "rotater" {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes "rotater" {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes "rotater" {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes "pulse" {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
64% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
65% {
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0.0;
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(0);
transform: scale(0);
filter: alpha(opacity=0);
opacity: 0;
}
64% {
-moz-transform: scale(0);
transform: scale(0);
filter: alpha(opacity=0);
opacity: 0;
}
65% {
-moz-transform: scale(0.6);
transform: scale(0.6);
filter: alpha(opacity=50);
opacity: 0.5;
}
100% {
-moz-transform: scale(1);
transform: scale(1);
filter: alpha(opacity=0);
opacity: 0.0;
}
}
@-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(0);
transform: scale(0);
filter: alpha(opacity=0);
opacity: 0;
}
64% {
-webkit-transform: scale(0);
transform: scale(0);
filter: alpha(opacity=0);
opacity: 0;
}
65% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
filter: alpha(opacity=50);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
filter: alpha(opacity=0);
opacity: 0.0;
}
}
@-ms-keyframes "pulse" {
0% {
-ms-transform: scale(0);
transform: scale(0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
64% {
-ms-transform: scale(0);
transform: scale(0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
65% {
-ms-transform: scale(0.6);
transform: scale(0.6);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
100% {
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0.0;
}
}
@-o-keyframes "pulse" {
0% {
-o-transform: scale(0);
transform: scale(0);
filter: alpha(opacity=0);
opacity: 0;
}
64% {
-o-transform: scale(0);
transform: scale(0);
filter: alpha(opacity=0);
opacity: 0;
}
65% {
-o-transform: scale(0.6);
transform: scale(0.6);
filter: alpha(opacity=50);
opacity: 0.5;
}
100% {
-o-transform: scale(1);
transform: scale(1);
filter: alpha(opacity=0);
opacity: 0.0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.