Skip to content

Instantly share code, notes, and snippets.

@LeftOverCoder

LeftOverCoder/css-play-pause-icons.markdown

Forked from anonymous/css-play-pause-icons.markdown
Created March 24, 2014 22:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save LeftOverCoder/9750795 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save LeftOverCoder/9750795 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Mar 24, 2014.
    7 changes: 7 additions & 0 deletions css-play-pause-icons.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    css play pause icons
    --------------------


    A [Pen](http://codepen.io/LeftOverCoder/pen/ksCIv) by [Ki Han](http://codepen.io/LeftOverCoder) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/LeftOverCoder/pen/ksCIv/license).
    31 changes: 31 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    <div class="icon">
    <div class="playicon"></div>
    </div>

    <div class="icon">
    <div class="pauseicon"></div>
    </div>

    <div class="locate">
    <div class="icon">
    <div class="trash">
    <div class="trash_square"></div>
    <div class="trash_square"></div>
    <div class="trash_square"></div>
    <div class="trash_square"></div>
    <div class="trash_square"></div>
    <div class="trash_square"></div>
    <div class="trash_square"></div>
    </div>
    </div>
    </div>


    <div class="arrow">
    <div class="icon">
    <div class="arrow_part"></div>
    <div class="arrow_part"></div>
    <div class="arrow_part"></div>
    <div class="arrow_part"></div>
    </div>
    </div>
    133 changes: 133 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,133 @@
    body{
    background-color:#333333;
    margin-left:auto;
    margin-right:auto;
    display:inline block;
    align-content:center;
    }

    .icon{
    width:60px;
    height:60px;
    background-color:rgba(69,229,48, 1);
    position:relative;
    float:left;
    margin-left:50px;
    margin-top:30px;
    z-index:2;
    border-radius: 200px;
    }

    /* Play Pause Icon CSS*/
    .playicon{
    position:absolute;
    margin-top:13px;
    margin-left:16px;
    border-left:35px solid #fff;
    border-right:18px dashed transparent;
    border-top:18px dashed transparent;
    border-bottom:18px dashed transparent;
    }

    .pauseicon{
    position:absolute;
    margin-top:13px;
    margin-left:12px;
    border-left:13px solid #fff;
    border-right:13px solid #fff;
    width: 10px;
    height: 35px;
    }

    /* Trash icon CSS */
    .trash > div{
    position:absolute;
    }
    .trash_square:nth-child(1) {
    width:34px;
    height:38px;
    background-color:#fff;
    margin-top:15px;
    margin-left:12px;
    border-radius: 6px;
    }
    .trash_square:nth-child(2){
    width:38px;
    height:6px;
    background-color:#fff;
    margin-top:14px;
    margin-left:10px;
    border-radius: 2px;
    }
    .trash_square:nth-child(3) {
    width: 28px;
    height: 30px;
    background-color: rgba(69,229,48, 1);
    margin-top: 20px;
    margin-left: 15px;
    }
    .trash_square:nth-child(4), .trash_square:nth-child(5), .trash_square:nth-child(6) {
    width: 3px;
    height: 24px;
    margin-top: 23px;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    border-radius: 4px;
    }
    .trash_square:nth-child(4){
    margin-left: 18px;
    }
    .trash_square:nth-child(5) {
    margin-left: 26px;
    }
    .trash_square:nth-child(6) {
    margin-left: 35px;
    }
    .trash_square:nth-child(7) {
    width:12px;
    height:4px;
    margin-top:8px;
    margin-left:21px;
    border-right:2px solid #fff;
    border-top:2px solid #fff;
    border-bottom:2px solid #fff;
    border-left:2px solid #fff;
    border-radius: 2px;
    }

    /* Arrow Icon CSS*/
    .arrow_part:nth-child(1),.arrow_part:nth-child(2){
    margin-top:11px;
    position:absolute;
    border-right:20px solid transparent;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;

    }
    .arrow_part:nth-child(1){
    margin-left:23px;
    border-left:20px solid rgba(255,255,255, 1);
    }
    .arrow_part:nth-child(2){
    margin-left:15px;
    border-left:20px solid rgba(69,229,48, 1);
    }
    .arrow_part:nth-child(3){
    position:absolute;
    margin-left:15px;
    margin-top:11px;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid rgba(69,229,48, 1);
    border-bottom:8px solid transparent;
    }

    .arrow_part:nth-child(4){
    position:absolute;
    margin-left:15px;
    margin-top:35px;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid transparent;
    border-bottom:8px solid rgba(69,229,48, 1);
    }