Making a Pure CSS Play/Pause Button

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Globally, the media control icons are some of the most universally understood visual language in any kind of interface. A designer can simply assume that every user not only knows ▶️ = play, but that users will seek out the icon in order to watch any video or animation.
Reportedly introduced in the 1960s by Swedish engineer Philip Olsson the play arrow was first designed to indicate the direction where the tape would go when reading on reel-to-reel tape players. Since then, we switched from cassettes to CDs, from the iPod to Spotify, but the media controls icons remain the same.

The play ▶️ icon is standard symbol (with its own unicode) of starting an audio/video media along with the rest of the symbols like stop, pause, fast-forward, rewind, and others.
There are unicode and emoji options for play button icons, but if you wanted something custom, you might reach for an icon font or custom asset. But what if you want to shift between the icons? Can that change be smooth? One solution could be to use SVG. But what if it could be done in 10 lines of CSS? How neat is that‽
In this article, we’ll build both a play button and a pause button with CSS and then explore how we can use CSS transitions to animate between them.
Play Button
Step one
We want to achieve a triangle pointing right. Let’s start by making a box with a thick border. Currently, boxes are the preferred base method to make triangles. We’ll start with a thick border and bright colors to help us see our changes.
<div class=’button play’></div>
.button.play {
width: 74px;
height: 74px;
border-style: solid;
border-width: 37px;
border-color: #202020;
}

Step two
Rendering a solid color border yields the above result. Hidden behind the color of the border is a neat little trick. How is the border being rendered exactly? Let’s change the border colors, one for each side, will help us see how the border is rendered.
<div class=’button play’></div>
.button.play{
width: 74px;
height: 74px;
border-style: solid;
border-width: 37px 37px 37px 37px;
border-color: red blue green yellow;
}

Step three
At the intersection of each border, you will notice that a 45-degree angle forms. This is an interesting way that borders are rendered by a browser and, hence, open the possibility of different shapes, like triangles. As we’ll see below, if we make the border-left wide enough, it looks as if we might achieve a triangle!
<div class=’button play’></div>
.button.play {
width: 74px;
height: 74px;
border-style: solid;
border-width: 37px 0px 37px 74px;
border-color: red blue green yellow;
}

Step four
Well, that didn’t work as expected. It is as if the inner box (the actual div) insisted on keeping its width. The reason has to do with the box-sizing property, which defaults to a value of content-box. The value content-box tells the div to place any border on the outside, increasing the width or height.
If we change this value to border-box, the border is added to the inside of the box.
<div class=’button play’></div>
.button.play {
box-sizing: border-box;
width: 74px;
height: 74px;
border-style: solid;
border-width: 37px 0px 37px 74px;
border-color: red blue green yellow;
}

Final step
Now we have a proper triangle. Next, we need to get rid of the top and bottom part (red and green). We do this by setting the border-color of those sides to transparent. The widths also gives us control over the shape and size of the triangle.
<div class=’button play’></div>
.button.play {
box-sizing: border-box;
width: 74px;
height: 74px;
border-style: solid;
border-color: #202020;
border-width: 37px 0px 37px 74px;
border-color: transparent transparent transparent #202020;
}

Here’s an animation to explain that, if that’s helpful.
Pause Button
Step one
We’ll continue making our pause symbol by starting with another thick-bordered box since the previous one worked so well.
<div class=’button pause’></div>
.button.pause {
width: 74px;
height: 74px;
border-style: solid;
border-width: 37px;
border-color: #202020;
}

Step two
This time we’ll be using another CSS property to achieve the desired result of two parallel lines. We’ll change the border-style to double. The double property in border-style is fairly straightforward, doubles the border by adding a transparent stroke in between. The stroke or empty gap will be 33% of the given border width.
<div class=’button pause’></div>
.button.pause{
width: 74px;
height: 74px;
border-style: double;
border-width: 0px 37px 0px 37px;
border-color: #202020;
}

Final step</h4

Now set one side of the border with the border-width property. Using the border-width is what will make the transition work smoothly in the next step.
<div class=’button pause’></div>
.button.pause{
width: 74px;
height: 74px;
border-style: double;
border-width: 0px 0px 0px 37px;
border-color: #202020;
}

Animating the Transition
In the two buttons we created above, notice that there are a lot of similarities, but two differences: border-width and border-style. If we use CSS transitions we can shift between the two symbols. There’s no transition effect for border-style but border-width works great.
A pause class toggle will now animate between the play and pause state.
Here’s the final style in SCSS:
<div class=’button’></div>
.button {
box-sizing: border-box;
height: 74px;

border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
will-change: border-width;
cursor: pointer;

// play state
border-style: solid;
border-width: 37px 0 37px 60px;

// paused state
&amp;.pause{
border-style: double;
border-width: 0px 0 0px 60px;
}
}
Demo
See the Pen mBqBqM by Daniel Abdilla (@xihadd) on CodePen.
A Bonus Without JS
In the demo above, I used JavaScript to toggle the classes between play state and pause state. This works perfectly, but what if you don’t want to use JavaDScript at all? Let’s take it a step further and use an HTML checkbox and skin it with the CSS we just used. We’ll use the checked state of the checkbox to toggle between play and pause:
<div class=”play-pause”>
<input type=”checkbox” value=”” id=”playPauseCheckbox” name=”playPauseCheckbox” />
<label for=”playPauseCheckbox”></label>
</div>
.playpause {
label {
display: block;
box-sizing: border-box;

width: 0;
height: 74px;

cursor: pointer;

border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
will-change: border-width;

// paused state
border-style: double;
border-width: 0px 0 0px 60px;
}
input[type=&quot;checkbox&quot;] {
visibility: hidden;

&amp;:checked + label {
// play state
border-style: solid;
border-width: 37px 0 37px 60px;
}
}
}
Demo
See the Pen oGoGMB by Daniel Abdilla (@xihadd) on CodePen.
I would love your thoughts and feedback. Please add them in the comments below.

Making a Pure CSS Play/Pause Button is a post from CSS-Tricks
Source: CssTricks

Posted on October 6, 2017 in animation, browser, css, custom, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Support, Expert Drupal Development, html, javascript, RID, Spotify, The, user, Video, Web Design Services

Share the Story

Back to Top