Skip to content

Instantly share code, notes, and snippets.

@luckcfm

luckcfm/dabblet.css

Forked from kahlil/dabblet.css
Created September 22, 2015 18:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save luckcfm/7ea7426e26dff755883f to your computer and use it in GitHub Desktop.
Save luckcfm/7ea7426e26dff755883f to your computer and use it in GitHub Desktop.
Download ZIP
CSS: Play and Pause buttons
Raw
dabblet.css
/**
* 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;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="play"></div>
<div id="pause"></div>
<div id="fwd"></div>
<div id="rew"></div>
Raw
settings.json
{"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