Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
SCSS Play Button Mixin
@mixin play-button ($fontsize, $circlesize) {
position: relative;
&:after {
content: '';
display: block;
width: $circlesize;
height: $circlesize;
border-radius: 100%;
position: absolute;
left: calc(50% - #{$circlesize / 2});
top: calc(50% - #{$circlesize / 2});
background-color: $brand-color;
background-color: transparentize($brand-color, .4);
color: white !important; //override more
font-size: $fontsize;
line-height: $circlesize * 1.1;
text-align: center;
vertical-align: bottom;

SCSS Perfect Play Button Mixin

Above is a mixin to provide a perfect play button for a video or something.

View an example here!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.