Skip to content

Instantly share code, notes, and snippets.

@doomkit
Created August 11, 2018 20:21
Show Gist options
  • Select an option

  • Save doomkit/1404f94faf25959e8bc9666465faa87a to your computer and use it in GitHub Desktop.

Select an option

Save doomkit/1404f94faf25959e8bc9666465faa87a to your computer and use it in GitHub Desktop.

Revisions

  1. doomkit created this gist Aug 11, 2018.
    33 changes: 33 additions & 0 deletions .scss
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    .button {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    background-color: #27d6e6;
    border-radius: 50%;
    cursor: pointer;

    &-play {
    position: absolute;
    top: calc(50% - 12.5px);
    left: calc(50% - 7px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12.5px 0 12.5px 20px;
    border-color: transparent transparent transparent #ffffff;
    pointer-events: none;
    }

    &-pause {
    position: absolute;
    top: calc(50% - 11px);
    left: calc(50% - 9px);
    width: 18px;
    height: 22px;
    border-left: 6px solid white;
    border-right: 6px solid white;
    pointer-events: none;
    }
    }