SCSS Play Button Mixin

play-button.scss

@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-play-button-mixin.md

SCSS Perfect Play Button Mixin

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

View an example here!