diff --git a/shared/components/Toolbar/Toolbar.jsx b/shared/components/Toolbar/Toolbar.jsx
index 5b68754d..74da47e5 100644
--- a/shared/components/Toolbar/Toolbar.jsx
+++ b/shared/components/Toolbar/Toolbar.jsx
@@ -10,11 +10,11 @@ class Toolbar extends React.Component {
 	render() {
 		let playButtonClass = classNames({
 			"toolbar__play-button": true,
-			"playing": this.props.isPlaying
+			"toolbar__play-button--selected": this.props.isPlaying
 		});
 		let stopButtonClass = classNames({
 			"toolbar__stop-button": true,
-			"stopped": !this.props.isPlaying
+			"toolbar__stop-button--selected": !this.props.isPlaying
 		});
 
 		return (
diff --git a/styles/components/_toolbar.scss b/styles/components/_toolbar.scss
index d5bafa53..f8001d86 100644
--- a/styles/components/_toolbar.scss
+++ b/styles/components/_toolbar.scss
@@ -1,7 +1,7 @@
 .toolbar__play-button {
 	@extend %toolbar-button;
 	margin-right: #{15 / $base-font-size}rem;
-	&.playing {
+	&--selected {
 		background-color: $light-button-background-hover-color;
 		& g {
 			fill: $light-button-hover-color;
@@ -11,7 +11,7 @@
 
 .toolbar__stop-button {
 	@extend %toolbar-button;
-	&.stopped {
+	&--selected {
 		background-color: $light-button-background-hover-color;
 		& g {
 			fill: $light-button-hover-color;