Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS: Play and Pause buttons
/**
* Play and Pause buttons
*/
body {
background: black;
}
#play, #pause, #fwd, #rew {
width:80px;
height: 80px;
background: white;
position: relative;
margin-top: 10px;
display: block;
}
#play:before {
width: 0;
height: 0;
border-left: 30px solid black;
border-right: 30px solid transparent;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
position: absolute;
content: "";
top: 10px;
left: 25px;
}
#pause:before {
width: 10px;
height: 60px;
background: black;
position: absolute;
content: "";
top: 10px;
left: 25px;
}
#pause:after {
width: 10px;
height: 60px;
background: black;
position: absolute;
content: "";
top: 10px;
right: 25px;
}
#fwd:before {
width: 0;
height: 0;
border-left: 30px solid black;
border-right: 30px solid transparent;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
position: absolute;
content: "";
top: 10px;
left: 17px;
}
#fwd:after {
width: 0;
height: 0;
border-left: 30px solid black;
border-right: 30px solid transparent;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
position: absolute;
content: "";
top: 10px;
left: 35px;
}
#rew:before {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid black;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
position: absolute;
content: "";
top: 10px;
right: 17px;
}
#rew:after {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid black;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
position: absolute;
content: "";
top: 10px;
right: 35px;
}
<!-- content to be placed inside <body>…</body> -->
<div id="play"></div>
<div id="pause"></div>
<div id="fwd"></div>
<div id="rew"></div>
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.