This post contains a total of 14+ Hand-Picked CSS Play/Pause Button Examples with Source Code. All the Play/Pause Buttons are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
Click a Code to Copy it.
1. By Andreas Antonsson
Made by Andreas Antonsson. Simple CSS Play button with Hover effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,900);
@-webkit-keyframes scaleIn {
to {
transform: scale(1);
}
}
@keyframes scaleIn {
to {
transform: scale(1);
}
}
@-webkit-keyframes slideIn {
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes slideIn {
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
html, body {
height: 100%;
}
body {
background: #0274FA;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;
}
.play-toggle {
position: relative;
cursor: pointer;
}
.play-toggle .play-circle, .play-toggle .play-circle:before, .play-toggle .play-circle:after, .play-toggle span {
display: inline-block;
vertical-align: middle;
}
.play-toggle span {
color: white;
margin-left: 1rem;
font-size: 1.2rem;
transition: transform 350ms ease;
}
.play-toggle span i, .play-toggle span strong {
display: inline-block;
opacity: 0;
transform: translate3d(-1rem, 0, 0);
-webkit-animation: slideIn 400ms ease forwards;
animation: slideIn 400ms ease forwards;
}
.play-toggle span i {
color: rgba(255, 255, 255, 0.7);
-webkit-animation-delay: 700ms;
animation-delay: 700ms;
}
.play-toggle span strong {
font-size: 1.25em;
font-weight: 900;
letter-spacing: 1px;
-webkit-animation-delay: 750ms;
animation-delay: 750ms;
}
.play-toggle .play-circle, .play-toggle .play-circle:before, .play-toggle .play-circle:after {
position: relative;
height: 4rem;
width: 4rem;
background: white;
border-radius: 50%;
transform: scale(0);
-webkit-animation: scaleIn 500ms cubic-bezier(0.075, 0.82, 0.165, 1) 500ms forwards;
animation: scaleIn 500ms cubic-bezier(0.075, 0.82, 0.165, 1) 500ms forwards;
}
.play-toggle .play-circle:before, .play-toggle .play-circle:after {
position: absolute;
top: 50%;
left: 50%;
content: "";
opacity: 0.04;
}
.play-toggle .play-circle:before {
height: 8rem;
width: 8rem;
margin-left: -4rem;
margin-top: -4rem;
}
.play-toggle .play-circle:after {
height: 12rem;
width: 12rem;
margin-left: -6rem;
margin-top: -6rem;
}
.play-toggle .play-icon {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white;
border-radius: 50%;
box-shadow: 0 3px 24px rgba(0, 0, 0, 0.3);
transition: transform 350ms ease;
}
.play-toggle .play-icon:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-35%, -50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 15px solid #0274FA;
border-bottom: 10px solid transparent;
}
.play-toggle:hover .play-icon {
transform: scale(1.1);
}
.play-toggle:hover span {
transform: translateX(0.3rem);
}
</style>
</head>
<body>
<div class="play-toggle">
<div class="play-circle">
<i class="play-icon"></i>
</div>
<span class="">
<i>Watch our</i><br>
<strong>Showreel</strong>
</span>
</div>
</body>
</html>2. By J Scott Smith
Made by J Scott Smith. Play button with Loading animation on hover. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@-webkit-keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.stroke-dotted {
opacity: 0;
stroke-dasharray: 4,5;
stroke-width: 1px;
transform-origin: 50% 50%;
-webkit-animation: spin 4s infinite linear;
animation: spin 4s infinite linear;
transition: opacity 1s ease, stroke-width 1s ease;
}
.stroke-solid {
stroke-dashoffset: 0;
stroke-dashArray: 300;
stroke-width: 4px;
transition: stroke-dashoffset 1s ease, opacity 1s ease;
}
.icon {
transform-origin: 50% 50%;
transition: transform 200ms ease-out;
}
#play:hover .stroke-dotted {
stroke-width: 4px;
opacity: 1;
}
#play:hover .stroke-solid {
opacity: 0;
stroke-dashoffset: 300;
}
#play:hover .icon {
transform: scale(1.05);
}
html {
height: 100%;
}
body {
height: 100%;
background-color: #30FF98;
background: radial-gradient(#71edb5, #30ff98);
}
#play {
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
<svg version="1.1" id="play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" width="100px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path class="stroke-solid" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
C97.3,23.7,75.7,2.3,49.9,2.5"/>
<path class="stroke-dotted" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
C97.3,23.7,75.7,2.3,49.9,2.5"/>
<path class="icon" fill="white" d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z"/>
</svg>
</body>
</html>3. By Shitsu
Made by Shitsu. Simple CSS Play/Pause button. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/* Variables
================================ */
/* Base
================================ */
*, *:before, *:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
background: #eff6d3;
background-image: linear-gradient(-90deg, #255F3A, #26255F);
}
/* Main
================================ */
.box {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 80px;
height: 80px;
margin: auto;
}
.play-button {
display: block;
position: relative;
width: 80px;
height: 80px;
margin: auto;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.play-button input[type=checkbox] {
display: none;
}
.play-button input[type=checkbox]:checked ~ span::before, .play-button input[type=checkbox]:checked ~ span::after {
border: 20px solid transparent;
border-left: 40px solid #fff;
border-right: 0;
}
.play-button input[type=checkbox]:checked ~ span::after {
transform: translateY(-50%) scaleY(0.5);
}
.play-button span {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 40px;
height: 40px;
}
.play-button span::before, .play-button span::after {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 100%;
border: 0 solid transparent;
border-left: 16px solid #fff;
transition: all 0.4s ease;
}
.play-button span::before {
left: 0;
}
.play-button span::after {
right: 0;
}
</style>
</head>
<body>
<div class="box">
<label class="play-button"><input type="checkbox"><span></span></label>
</div>
</body>
</html>4. By Arturo Alviar
Made by Arturo Alviar. CSS Play button with Ripple animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
background: linear-gradient(to right, #f857a6, #ff5858);
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
.button {
display: inline-block;
position: relative;
}
.button.is-play {
background-color: #fff;
border-radius: 50%;
width: 100px;
height: 100px;
}
.button.is-play .button-outer-circle {
background: rgba(255,255,255,0.2);
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
}
.button.is-play .button-icon {
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
}
.button.is-play .button-icon .triangle {
-webkit-animation: fadeIn 7s ease;
animation: fadeIn 7s ease;
}
.button.is-play .button-icon .path {
stroke-dasharray: 90;
stroke-dashoffset: 0;
-webkit-animation: triangleStroke 3s;
animation: triangleStroke 3s;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
}
.has-scale-animation {
-webkit-animation: smallScale 3s infinite;
animation: smallScale 3s infinite;
}
.has-delay-short {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes triangleStroke {
from {
stroke-dashoffset: 90;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes triangleStroke {
from {
stroke-dashoffset: 90;
}
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes smallScale {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes smallScale {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.5);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container"><a class="button is-play" href="#">
<div class="button-outer-circle has-scale-animation"></div>
<div class="button-outer-circle has-scale-animation has-delay-short"></div>
<div class="button-icon is-play">
<svg height="100%" width="100%" fill="#f857a6">
<polygon class="triangle" points="5,0 30,15 5,30" viewBox="0 0 30 15"></polygon>
<path class="path" d="M5,0 L30,15 L5,30z" fill="none" stroke="#f857a6" stroke-width="1"></path>
</svg>
</div></a></div>
</body>
</html>5. By ZhangZhuo
Made by ZhangZhuo. Play/Pause button with Hover effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
html, body {
height: 100%;
}
body {
background: #009688;
display: flex;
align-items: center;
justify-content: center;
}
#play-button-container {
display: inline-block;
width: 50px;
height: 50px;
cursor: pointer;
}
.play-button {
display: inline-block;
position: absolute;
width: 50px;
height: 50px;
background: #fff;
transition: -webkit-clip-path .3s ease;
transition: clip-path .3s ease;
transition: clip-path .3s ease, -webkit-clip-path .3s ease;
}
.play-button-before {
-webkit-clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
}
.play-button-after {
-webkit-clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
}
#play-button-container:hover .play-button-before {
-webkit-clip-path: polygon(0 0, 30% 0, 30% 100%, 0% 100%);
clip-path: polygon(0 0, 30% 0, 30% 100%, 0% 100%);
}
#play-button-container:hover .play-button-after{
-webkit-clip-path: polygon(70% 0, 100% 0, 100% 100%, 70% 100%);
clip-path: polygon(70% 0, 100% 0, 100% 100%, 70% 100%)
}
</style>
</head>
<body>
<span id="play-button-container">
<span class="play-button play-button-before"></span>
<span class="play-button play-button-after"></span>
</span>
</body>
</html>6. By Sven
Made by Sven. Play button with ripple animation and hover effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
background: #e9e9e9;
padding: 50px;
}
.wrapper {
position: relative;
width: 150px;
height: 150px;
margin: 0 auto;
}
.wrapper .circle {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background-color: #33cc33;
margin: auto;
transform: scale(1, 1);
}
.wrapper .circle.pulse {
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
background-color: #99e699;
}
.wrapper svg {
fill: #279b27;
stroke: #279b27;
stroke-linejoin: round;
stroke-width: 5;
transition: all 0.3s;
}
.wrapper svg:hover {
cursor: pointer;
fill: #228722;
stroke: #228722;
transform: scale(1.2, 1.2);
}
@-webkit-keyframes pulse {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1.2);
}
100% {
transform: scale(1, 1);
}
}
@keyframes pulse {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1.2);
}
100% {
transform: scale(1, 1);
}
}
</style>
</head>
<body>
<body>
<div class="wrapper">
<div class="circle pulse"></div>
<div class="circle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<polygon points="40,30 65,50 40,70"></polygon>
</svg>
</div>
</div>
</body>
</body>
</html>7. By Chris Draycott-Wheatley
Made by Chris Draycott-Wheatley. Simplistic CSS Play button. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
.play-button-outer {
margin: 25% auto;
width: 10em;
height: 10em;
background-color: rgba(0, 0, 0, .25);
cursor: pointer;
}
.play-button {
margin: 0 auto;
top: 25%;
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 2.5em 0 2.5em 5em;
border-color: transparent transparent transparent #000;
opacity: .75;
}
.play-button-outer:hover {
background-color: rgba(0, 0, 0, .5);
}
.play-button-outer:hover .play-button {
opacity: 1;
}
</style>
</head>
<body>
<div class="play-button-outer">
<div class="play-button"></div>
</div>
</body>
</html>8. By David Darnes
Made by David Darnes. YouTube Play Pause Button. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
background: #111;
text-align: center;
}
svg {
margin-top: 45vh;
width: 40px;
height: 40px;
cursor: pointer;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
<!-- bar 1 -->
<path fill="#D8D8D8" d="M0,0 L6,0 L6,16 L0,16 L0,0 Z" id="bar1">
<animate xlink:href="#bar1"
attributeName="d"
from="M0,0 L6,0 L6,16 L0,16 L0,0 Z"
to="M0,0 L6,3.20001221 L6,12.7999878 L0,16 L0,0 Z"
dur="0.3s"
fill="freeze"
begin="startAnimation.begin" />
<animate xlink:href="#bar1"
attributeName="d"
from="M0,0 L6,3.20001221 L6,12.7999878 L0,16 L0,0 Z"
to="M0,0 L6,0 L6,16 L0,16 L0,0 Z"
dur="0.3s"
fill="freeze"
begin="reverseAnimation.begin" />
</path>
<!-- horizontal line -->
<path fill="#D8D8D8" d="M10,0 L16,0 L16,16 L10,16 Z" id="bar2">
<animate attributeName="d"
from="M10,0 L16,0 L16,16 L10,16 Z"
to="M5.9944458,3.20001221 L15,8 L15,8 L5.9944458,12.7999878 Z"
dur="0.3s"
fill="freeze"
begin="startAnimation.begin" />
<animate attributeName="d"
from="M5.9944458,3.20001221 L15,8 L15,8 L5.9944458,12.7999878 Z"
to="M10,0 L16,0 L16,16 L10,16 Z"
dur="0.3s"
fill="freeze"
begin="reverseAnimation.begin" />
</path>
<!-- controls -->
<!-- these are on top of the visible icon. Their radius changes depending on which is active
Opacity is set to 0 so you can't see them-->
<circle cx="16" cy="16" r="16" fill-opacity="0">
<animate dur="0.01s" id="startAnimation" attributeName="r" values="16; 0" fill="freeze" begin="click" />
<animate dur="0.01s" attributeName="r" values="0; 16" fill="freeze" begin="reverseAnimation.end" />
</circle>
<circle cx="16" cy="16" r="0" fill-opacity="0">
<animate dur="0.001s" id="reverseAnimation" attributeName="r" values="16; 0" fill="freeze" begin="click" />
<animate dur="0.001s" attributeName="r" values="0; 16" begin="startAnimation.end" fill="freeze" />
</circle>
</svg>
</body>
</html>9. By Mahtamun Hoque Fahim
Made by Mahtamun Hoque Fahim. Simple CSS Play button with animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<style>
* {
margin: 0;
padding: 0;
outline: 0;
scroll-behavior: smooth;
transition: 0.5s ease-in;
}
body {
background-color: #222;
display: grid;
place-content: center;
height: 100vh;
}
body > div.circle {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: #333;
display: grid;
place-content: center;
animation: grow 1s infinite;
}
body > div.circle > span {
color: #eee;
font-size: 50px;
}
@keyframes grow {
from {
box-shadow: 0px 0px 1em #000;
}
to {
box-shadow: 0px 0px 3em #000;
}
}
</style>
</head>
<body>
<div class="circle">
<span class="material-icons">
play_circle
</span>
</div>
</body>
</html>10. By Chien-Ju Peng
Made by Chien-Ju Peng. Video play button with loading animation and Click effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-image: url('https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=1275&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1825');
background-size: cover;
}
.video-play-button {
display: block;
width: 104px;
height: 104px;
position: absolute;
top: 50%;
left: 50%;
margin: -52px 0 0 -52px;
cursor: pointer;
}
.video-play-outline {
display: block;
width: 96px;
height: 96px;
border: #FFF 4px solid;
border-radius: 50%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
opacity: .7;
transition:all .5s;
}
.video-play-circle {
stroke-dasharray: 315;
stroke-dashoffset: 315;
transition: stroke-dashoffset .5s;
}
.video-play-button svg {
display: block;
transform: rotate(-90deg);
transition: transform .3s;
}
.video-play-button:hover .video-play-circle {
stroke-dashoffset: 0;
}
.video-play-button:active .video-play-outline {
transform: scale(1.5);
opacity: 0;
}
.video-play-button:active svg {
transform: rotate(-90deg) scale(.95);
}
</style>
</head>
<body>
<a class="video-play-button">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 104 104" enable-background="new 0 0 104 104" xml:space="preserve">
<path fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" d="M26,35h52L52,81L26,35z"/>
<circle class="video-play-circle" fill="none" stroke="#DA3D25" stroke-width="4" stroke-miterlimit="10" cx="52" cy="52" r="50"/>
</svg>
<span class="video-play-outline"></span>
</a>
</body>
</html>11. By Weerapat Poosri
Made by Weerapat Poosri. Animated play and pause button. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@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;
}
}
</style>
</head>
<body>
<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>
</body>
</html>12. By Terry Tong
Made by Terry Tong. CSS Circle Play Button. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<style>
body {
background-color: #666;
}
.round-button {
box-sizing: border-box;
display:block;
width:80px;
height:80px;
padding-top: 14px;
padding-left: 8px;
line-height: 20px;
border: 6px solid #fff;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background-color: rgba(0,0,0,0.5);
font-size:20px;
font-weight:bold;
transition: all 0.3s ease;
}
.round-button:hover {
background-color: rgba(0,0,0,0.8);
box-shadow: 0px 0px 10px rgba(255,255,100,1);
text-shadow: 0px 0px 10px rgba(255,255,100,1);
}
</style>
</head>
<body>
<a href="#" class="round-button"><i class="fa fa-play fa-2x"></i></a>
</body>
</html>13. By Amy Carrigan
Made by Amy Carrigan. CSS Media player with play pause buttons. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://wvus-ibu.github.io/swing/css/style.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lato:ital,[email protected],300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Lora:[email protected];1&display=swap'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
<style>
button {
padding: 0;
}
body {
align-items: center;
background-color: #fff8e7;
color: #545454;
display: flex;
height: 100vh;
justify-content: center;
position: relative;
}
body:before {
background: no-repeat 23vw 30vh url("https://assets.codepen.io/518555/sparkles1.svg"), no-repeat right 25vw bottom 30vh url("https://assets.codepen.io/518555/sparkles4.svg"), no-repeat 40vw 30vh / 35vw url("https://assets.codepen.io/518555/blobStripe.svg");
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
body:after {
background: no-repeat 25vw 40vh / 30vw url("https://assets.codepen.io/518555/blobSolid.svg");
content: '';
height: 100%;
left: 0;
opacity: 0.8;
position: absolute;
top: 0;
width: 100%;
z-index: -2;
}
.media-controls {
align-items: center;
background: #fffaee;
border: 1px solid #fff3eb;
border-radius: 24px;
color: #565656;
display: flex;
flex-direction: column;
justify-content: center;
margin: 24px;
max-width: calc(100% - 24px * 2);
padding: 24px;
position: relative;
}
.media-controls:after {
border-radius: 24px;
box-shadow: 0 2px 2px rgba(255, 107, 0, 0.25), 0 4px 4px rgba(255, 107, 0, 0.2), 0 8px 8px rgba(255, 107, 0, 0.15), 0 16px 16px rgba(255, 107, 0, 0.1), 0 24px 24px rgba(255, 107, 0, 0.05);
content: '';
height: 100%;
left: 0;
mix-blend-mode: multiply;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.media-buttons {
display: flex;
flex-wrap: nowrap;
}
.media-button {
background-color: transparent;
border: none;
align-items: center;
border-radius: 100%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
@media (min-width: 421px) {
.media-button {
padding: 12px;
}
}
.button-icons {
background-color: #ffc399;
border-radius: 100%;
margin-bottom: 4px;
margin-top: auto;
padding: 16px;
}
.back-button .button-icons,
.skip-button .button-icons {
background-color: transparent;
color: #919191;
}
.rewind-button .button-icons,
.fast-forward-button .button-icons {
background: linear-gradient(to bottom left, #fff8e7, #ffe1cc);
color: #838383;
}
.play-button .button-icons {
background: linear-gradient(to bottom left, #ffffff, #fff8e7);
border: 1px solid #fff3eb;
box-shadow: -1px 1px 1px rgba(255, 195, 153, 0.25), 1px -1px 1px rgba(255, 255, 255, 0.25), -2px 2px 2px rgba(255, 195, 153, 0.2), 2px -2px 2px rgba(255, 255, 255, 0.2), -4px 4px 4px rgba(255, 195, 153, 0.15), 4px -4px 4px rgba(255, 255, 255, 0.15), -8px 8px 8px rgba(255, 195, 153, 0.1), 8px -8px 8px rgba(255, 255, 255, 0.1), -16px 16px 16px rgba(255, 195, 153, 0.05), 16px -16px 16px rgba(255, 255, 255, 0.05);
color: #f26600;
margin-bottom: 8px;
padding: 24px;
}
.button-text {
margin-top: auto;
}
.media-progress {
align-self: stretch;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.progress-bar-wrapper {
background-color: transparent;
border-radius: 12px;
box-shadow: inset -1px 1px 1px rgba(255, 195, 153, 0.25), inset 1px -1px 1px rgba(255, 255, 255, 0.25), inset -2px 2px 2px rgba(255, 195, 153, 0.2), inset 2px -2px 2px rgba(255, 255, 255, 0.2), inset -4px 4px 4px rgba(255, 195, 153, 0.15), inset 4px -4px 4px rgba(255, 255, 255, 0.15), inset -8px 8px 8px rgba(255, 195, 153, 0.1), inset 8px -8px 8px rgba(255, 255, 255, 0.1), inset -16px 16px 16px rgba(255, 195, 153, 0.05), inset 16px -16px 16px rgba(255, 255, 255, 0.05);
height: 12px;
margin-bottom: 8px;
margin-top: 24px;
position: relative;
width: 100%;
}
.progress-bar {
background: linear-gradient(to right, #fdd25f, #ff6b00);
border-radius: 12px;
box-shadow: none;
height: 12px;
width: 44%;
}
</style>
</head>
<body>
<div class="media-controls">
<div class="media-buttons">
<button class="back-button media-button" label="back">
<i class="fas fa-step-backward button-icons"></i>
<span class="button-text milli">Back</span>
</button>
<button class="rewind-button media-button" label="rewind">
<i class="fas fa-backward button-icons"></i>
<span class="button-text milli">Rewind</span>
</button>
<button class="play-button media-button" label="play">
<i class="fas fa-play button-icons delta"></i>
<span class="button-text milli">Play</span>
</button>
<button class="fast-forward-button media-button" label="fast forward">
<i class="fas fa-forward button-icons"></i>
<span class="button-text milli">Forward</span>
</button>
<button class="skip-button media-button" label="skip">
<i class="fas fa-step-forward button-icons"></i>
<span class="button-text milli">Skip</span>
</button>
</div>
<div class="media-progress">
<div class="progress-bar-wrapper progress">
<div class="progress-bar">
</div>
</div>
<div class="progress-time-current milli">
15:23
</div>
<div class="progress-time-total milli">
34:40
</div>
</div>
</div>
</body>
</html>14. By Ian Soper
Made by Ian Soper. Scalable Play Pause Buttons with Pure CSS, made with LESS. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
menu {
/* @size sets the relative size of the buttons, define before calling the buttons mixin */
/* Play */
/* Stop */
/* Fast-Forward */
/* Rewind */
/* Pause */
margin: 2em auto;
text-align: center;
position: relative;
}
menu button {
position: relative;
display: inline-block;
padding: 0.6em;
background: linear-gradient(#fff, #ccc), #c9c5c9;
border-radius: 10em;
border: 0 solid #d0d0d0;
width: 8em;
height: 8em;
margin-right: 20px;
box-shadow: 0 0.48em 0.56em rgba(0, 0, 0, 0.4);
}
menu button:hover {
background: linear-gradient(#f5f5f5, #b9b9b9), #c9c5c9;
}
menu button:before,
menu button:after {
position: absolute;
content: " ";
}
menu button:active {
top: 0.4em;
box-shadow: 0 0.16em 0.24em rgba(0, 0, 0, 0.4);
}
menu .play:before {
z-index: 2;
top: 1.76em;
left: 2.88em;
width: 0;
height: 0;
border: 2.4em solid transparent;
border-left-color: rgba(100, 100, 100, 0.8);
border-left-width: 3.6em;
}
menu .play:hover:before {
border-left-color: rgba(36, 36, 36, 0.8);
}
menu .stop:before {
top: 2.24em;
left: 2.24em;
width: 3.76em;
height: 3.76em;
background: rgba(100, 100, 100, 0.8);
}
menu .stop:hover:before {
background: rgba(36, 36, 36, 0.8);
}
menu .ff:before,
menu .ff:after {
width: 0;
height: 0;
top: 2.08em;
border: 2em solid transparent;
border-left-color: rgba(100, 100, 100, 0.8);
border-left-width: 2.16em;
}
menu .ff:before {
left: 2.4em;
}
menu .ff:after {
left: 4.528em;
content: " ";
}
menu .ff:hover:before,
menu .ff:hover:after {
border-left-color: rgba(36, 36, 36, 0.8);
}
menu .rw:before,
menu .rw:after {
width: 0;
height: 0;
top: 2.08em;
border: 2em solid transparent;
border-right-color: rgba(100, 100, 100, 0.8);
border-right-width: 2.16em;
}
menu .rw:before {
left: 1.76em;
}
menu .rw:after {
left: -0.4em;
content: " ";
}
menu .rw:hover:after,
menu .rw:hover:before {
border-right-color: rgba(36, 36, 36, 0.8);
}
menu .pause:before,
menu .pause:after {
height: 3.76em;
width: 1.52em;
left: 2.32em;
top: 2.24em;
display: block;
background-color: rgba(100, 100, 100, 0.8);
}
menu .pause:after {
left: 4.32em;
}
menu .pause:hover:before,
menu .pause:hover:after {
background-color: rgba(36, 36, 36, 0.8);
}
menu.medium {
/* Play */
/* Stop */
/* Fast-Forward */
/* Rewind */
/* Pause */
}
menu.medium button {
position: relative;
display: inline-block;
padding: 0.6em;
background: linear-gradient(#fff, #ccc), #c9c5c9;
border-radius: 10em;
border: 0 solid #d0d0d0;
width: 5em;
height: 5em;
margin-right: 20px;
box-shadow: 0 0.3em 0.35em rgba(0, 0, 0, 0.4);
}
menu.medium button:hover {
background: linear-gradient(#f5f5f5, #b9b9b9), #c9c5c9;
}
menu.medium button:before,
menu.medium button:after {
position: absolute;
content: " ";
}
menu.medium button:active {
top: 0.25em;
box-shadow: 0 0.1em 0.15em rgba(0, 0, 0, 0.4);
}
menu.medium .play:before {
z-index: 2;
top: 1.1em;
left: 1.8em;
width: 0;
height: 0;
border: 1.5em solid transparent;
border-left-color: rgba(100, 100, 100, 0.8);
border-left-width: 2.25em;
}
menu.medium .play:hover:before {
border-left-color: rgba(36, 36, 36, 0.8);
}
menu.medium .stop:before {
top: 1.4em;
left: 1.4em;
width: 2.35em;
height: 2.35em;
background: rgba(100, 100, 100, 0.8);
}
menu.medium .stop:hover:before {
background: rgba(36, 36, 36, 0.8);
}
menu.medium .ff:before,
menu.medium .ff:after {
width: 0;
height: 0;
top: 1.3em;
border: 1.25em solid transparent;
border-left-color: rgba(100, 100, 100, 0.8);
border-left-width: 1.35em;
}
menu.medium .ff:before {
left: 1.5em;
}
menu.medium .ff:after {
left: 2.83em;
content: " ";
}
menu.medium .ff:hover:before,
menu.medium .ff:hover:after {
border-left-color: rgba(36, 36, 36, 0.8);
}
menu.medium .rw:before,
menu.medium .rw:after {
width: 0;
height: 0;
top: 1.3em;
border: 1.25em solid transparent;
border-right-color: rgba(100, 100, 100, 0.8);
border-right-width: 1.35em;
}
menu.medium .rw:before {
left: 1.1em;
}
menu.medium .rw:after {
left: -0.25em;
content: " ";
}
menu.medium .rw:hover:after,
menu.medium .rw:hover:before {
border-right-color: rgba(36, 36, 36, 0.8);
}
menu.medium .pause:before,
menu.medium .pause:after {
height: 2.35em;
width: 0.95em;
left: 1.45em;
top: 1.4em;
display: block;
background-color: rgba(100, 100, 100, 0.8);
}
menu.medium .pause:after {
left: 2.7em;
}
menu.medium .pause:hover:before,
menu.medium .pause:hover:after {
background-color: rgba(36, 36, 36, 0.8);
}
menu.small {
/* Play */
/* Stop */
/* Fast-Forward */
/* Rewind */
/* Pause */
}
menu.small button {
position: relative;
display: inline-block;
padding: 0.6em;
background: linear-gradient(#fff, #ccc), #c9c5c9;
border-radius: 10em;
border: 0 solid #d0d0d0;
width: 3em;
height: 3em;
margin-right: 20px;
box-shadow: 0 0.18em 0.21em rgba(0, 0, 0, 0.4);
}
menu.small button:hover {
background: linear-gradient(#f5f5f5, #b9b9b9), #c9c5c9;
}
menu.small button:before,
menu.small button:after {
position: absolute;
content: " ";
}
menu.small button:active {
top: 0.15em;
box-shadow: 0 0.06em 0.09em rgba(0, 0, 0, 0.4);
}
menu.small .play:before {
z-index: 2;
top: 0.66em;
left: 1.08em;
width: 0;
height: 0;
border: 0.9em solid transparent;
border-left-color: rgba(100, 100, 100, 0.8);
border-left-width: 1.35em;
}
menu.small .play:hover:before {
border-left-color: rgba(36, 36, 36, 0.8);
}
menu.small .stop:before {
top: 0.84em;
left: 0.84em;
width: 1.41em;
height: 1.41em;
background: rgba(100, 100, 100, 0.8);
}
menu.small .stop:hover:before {
background: rgba(36, 36, 36, 0.8);
}
menu.small .ff:before,
menu.small .ff:after {
width: 0;
height: 0;
top: 0.78em;
border: 0.75em solid transparent;
border-left-color: rgba(100, 100, 100, 0.8);
border-left-width: 0.81em;
}
menu.small .ff:before {
left: 0.9em;
}
menu.small .ff:after {
left: 1.698em;
content: " ";
}
menu.small .ff:hover:before,
menu.small .ff:hover:after {
border-left-color: rgba(36, 36, 36, 0.8);
}
menu.small .rw:before,
menu.small .rw:after {
width: 0;
height: 0;
top: 0.78em;
border: 0.75em solid transparent;
border-right-color: rgba(100, 100, 100, 0.8);
border-right-width: 0.81em;
}
menu.small .rw:before {
left: 0.66em;
}
menu.small .rw:after {
left: -0.15em;
content: " ";
}
menu.small .rw:hover:after,
menu.small .rw:hover:before {
border-right-color: rgba(36, 36, 36, 0.8);
}
menu.small .pause:before,
menu.small .pause:after {
height: 1.41em;
width: 0.57em;
left: 0.87em;
top: 0.84em;
display: block;
background-color: rgba(100, 100, 100, 0.8);
}
menu.small .pause:after {
left: 1.62em;
}
menu.small .pause:hover:before,
menu.small .pause:hover:after {
background-color: rgba(36, 36, 36, 0.8);
}
/*
The buttons mixin that defines the buttons styles, the @size must be defined to set the relative size
*/
/*
Other Styles
*/
body {
background: #c1c1c1;
}
</style>
</head>
<body>
<menu>
<button class="rw"></button>
<button class="play"></button>
<button class="pause"></button>
<button class="stop"></button>
<button class="ff"></button>
</menu>
<menu class="medium">
<button class="rw"></button>
<button class="play"></button>
<button class="pause"></button>
<button class="stop"></button>
<button class="ff"></button>
</menu>
<menu class="small">
<button class="rw"></button>
<button class="play"></button>
<button class="pause"></button>
<button class="stop"></button>
<button class="ff"></button>
</menu>
</body>
</html>15. By Arnold Longequeue
Made by Arnold Longequeue. Play button with loading animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.stroke-solid {
stroke-dashoffset: 0;
stroke-dashArray: 300;
stroke-width: 4px;
transition: stroke-dashoffset 1s ease, opacity 1s ease;
}
.icon {
transform: scale(0.8);
transform-origin: 50% 50%;
transition: transform 200ms ease-out;
}
#play:hover .stroke-solid {
opacity: 1;
stroke-dashoffset: 300;
}
#play:hover .icon {
transform: scale(0.9);
}
html {
height: 100%;
}
body {
height: 100%;
background-image: url("http://taylorswines.uat.playhousedigital.com/media/wysiwyg/TaylorsWines/Homepage/img_video.png");
}
#play {
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
<body>
<svg version="1.1" id="play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="100px" width="100px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path class="stroke-solid" fill="none" stroke="#ddbe72" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7
C97.3,23.7,75.7,2.3,49.9,2.5"/>
<path class="icon" fill="#ddbe72" d="M38,69c-1,0.5-1.8,0-1.8-1.1V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9L38,69z"/>
</svg>
</body>
</html>