H3XED

How To Make CSS Play & Pause Icons With A Single DIV

Please note that this post is over a year old and may contain outdated information.
Using CSS borders, you can create play and pause icons with full browser compatibility, no images, and no extra http requests. Each one uses just one <div> and simple CSS.

Here are the icons:



If you have box-sizing: content-box set (default), use this CSS:

.play {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 12px solid #000;
    border-bottom: 8px solid transparent;
}
.pause {
    width: 4px;
    height: 16px;
    border-right: 4px solid #000;
    border-left: 4px solid #000;
}

If you have box-sizing: border-box set, use this CSS:

.play {
    width: 12px;
    height: 16px;
    border-top: 8px solid transparent;
    border-left: 12px solid #000;
    border-bottom: 8px solid transparent;
}
.pause {
    width: 12px;
    height: 16px;
    border-right: 4px solid #000;
    border-left: 4px solid #000;
}

To make them larger, increase the width and height and make sure to adjust the borders accordingly.
Share This Post
Twitter

Comments (1)

Nicholas Allen   Oct 17, 2014
This is a very simple approach!
Share This Post
Twitter
H3XED © Nick Vogt   RSS   Policies   Twitter