css-play-pause-icons.markdown

css play pause icons

A Pen by Ki Han on CodePen.

License.

index.html

<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>

style.css

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);
}