Skip to content

Instantly share code, notes, and snippets.

@b-ma

b-ma/index.html

Last active November 11, 2015 20:30
Show Gist options
  • Save b-ma/4d7abaf716c9a31c2d5f to your computer and use it in GitHub Desktop.
Save b-ma/4d7abaf716c9a31c2d5f to your computer and use it in GitHub Desktop.
Download ZIP
transport buttons
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transport Buttons</title>
<link rel="stylesheet" type="text/css" href="./transport-btns.css" />
</head>
<body>
<code>Play/Pause Button</code>
<div>
<svg width="20" height="20" viewbox="0 0 20 20" class="transport-btn btn-play-pause play">
<rect class="bg" x="0" y="0" width="20" height="20" rx="2" ry="2"></rect>
<polygon class="play-shape" points="6, 5, 15, 10, 6, 15"></polygon>
<g class="pause-shape">
<rect class="left" x="5" y="5" width="3" height="10"></rect>
<rect class="right" x="12" y="5" width="3" height="10"></rect>
</g>
</svg>
<br />
<svg width="20" height="20" viewbox="0 0 20 20" class="transport-btn btn-play-pause pause">
<rect class="bg" x="0" y="0" width="20" height="20" rx="2" ry="2"></rect>
<polygon class="play-shape" points="6, 5, 15, 10, 6, 15"></polygon>
<g class="pause-shape">
<rect class="left" x="5" y="5" width="3" height="10"></rect>
<rect class="right" x="12" y="5" width="3" height="10"></rect>
</g>
</svg>
</div>
<code>Stop Button</code>
<div>
<svg width="20" height="20" viewbox="0 0 20 20" class="transport-btn btn-stop">
<rect class="bg" x="0" y="0" width="20" height="20" rx="2" ry="2"></rect>
<rect class="stop-shape" x="6" y="6" width="8" height="8"></rect>
</svg>
</div>
<code>Record Button</code>
<div>
<svg width="20" height="20" viewbox="0 0 20 20" class="transport-btn btn-record">
<rect class="bg" x="0" y="0" width="20" height="20" rx="2" ry="2"></rect>
<circle class="record-shape" cx="10" cy="10" r="5"></circle>
</svg>
</div>
</body>
</html>
Raw
transport-btns.css
/* common */
.transport-btn {
cursor: pointer;
}
.transport-btn .bg {
fill: rgba(30, 30, 30, 0.5);
transition: fill 120ms ease;
}
.transport-btn:hover .bg {
fill: rgba(30, 30, 30, 0.4);
}
/* play/pause button */
.transport-btn.btn-play-pause .play-shape,
.transport-btn.btn-play-pause .pause-shape rect {
fill: #ffffff;
}
/* stop button */
.transport-btn.btn-play-pause.play .play-shape { display: block; }
.transport-btn.btn-play-pause.play .pause-shape { display: none; }
.transport-btn.btn-play-pause.pause .play-shape { display: none; }
.transport-btn.btn-play-pause.pause .pause-shape { display: block; }
.transport-btn.btn-stop .stop-shape {
fill: #ffffff;
}
/* record shape */
.transport-btn.btn-record .record-shape {
fill: #e6354c;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment