Snippet of the Day: Pure CSS Animated Play, Pause, and Buffer Button

The title says it all: A pure CSS animated play, pause, and buffer button. The way I have it implemented, it uses JS to switch between play, pause, and buffer states, but it’s the CSS dataset/class selectors that actually control the appearance/animations. If you really wanted to do this in pure CSS, you could make the button a label for a checkbox and control the states that way. I’m not sure why you’d want to do it that way, but if you did, that’s a way you could do it. Anyway… Continue reading “Snippet of the Day: Pure CSS Animated Play, Pause, and Buffer Button”

Snippet of the Day 2020-03-27

I want to get in the habit of posting little bits of code that have been useful in my day to day. Here’s a little snippet for material design labels. This creates the little rising effect using pure CSS. I built this to play nice with bootstrap.

<div class = 'mat-group'>	 
    <input type = 'text' class = 'form-control' placeholder = 'anything, but must be something.'>
    <label>The placeholder text.</label>

    .mat-group label { position:absolute;margin-top:-1.25rem; pointer-events:none; transition: all .3s ease; color: rgba(0,0,0,.26);}
    .mat-group input:focus + label,.mat-group input:not(:placeholder-shown) + label { position:absolute; margin-top:-2.7rem; font-size: .75rem; color:#009688; }
    input::placeholder {color:transparent !important;}

In action: