A Pen by Jatinder Assi.

CSS:-Common-Button-Shapes-.markdown

CSS: Common Button Shapes

Demo: http://cdpn.io/hAzsj

A Pen by Jatinder Assi on CodePen.

License.

index.html

<ul>
  <li> 
    <button class="back_button">Back</button>
  </li>
  
   <li> 
    <button class="forward_button">Forward</button>
  </li>
  
  <li>
    <span class="play_button"></span>
  </li>
  
  <li>
    <button class="next_button"></button>
  </li>
  
   <li>
    <button class="prev_button"></button>
  </li>
  
  
</ul>

 

style.less

li{
     margin:20px;
     display:block;
     position:relative;  
     width:100%;
     height:50px;
}

.play_button{
  .play_button(50px,rgba(0,0,0,0.5),red);
}

.back_button{
  .back_button(100px,50px,rgba(0,0,0,0.7),5px);
   color:#fff; 
}

.forward_button{
  .forward_button(100px,50px,rgba(0,0,0,0.7),5px);
   color:#fff; 
 }

.next_button{
  .next_button(50px,50px,rgba(0,0,0,0.9));
}

.prev_button{
  .prev_button(50px,50px,rgba(0,0,0,0.9));
}


/**
 *  Mixins Below  
 */
.right-arrow(@size,@color){  
  border-top:@size solid transparent;
	border-bottom: @size solid transparent; 
	border-left:@size solid @color; 
  width: 0; 
	height: 0; 
  display:block;
}

.left-arrow(@size,@color){  
  border-top:@size solid transparent;
	border-bottom: @size solid transparent; 
	border-right:@size solid @color; 
  width: 0; 
	height: 0; 
  display:block;
}

.play_button(@size,@bg,@arrowBg){
  position:relative;
  background:@bg;
  border-radius:@size;
  width:@size;
  height:@size;
  display:inline-block;
  z-index:1;
   
  &:before{
    content:'';
    position:absolute;
    z-index:2;
    top:@size/4;
    left: (@size - @size/4) / 2 + @size/16;
    margin:0;
	  .right-arrow(@size/4,@arrowBg); 
  }
  
}

.back_button(@sizeW,@sizeH,@bg,@bgRadius){
   background:@bg;
   border-top-right-radius:@bgRadius; 
   border-bottom-right-radius:@bgRadius; 
   border-top-left-radius:0;
   border-bottom-left-radius:0; 
   width:@sizeW; 
   height:@sizeH;  
   position:relative;
   display:inline-block;
   z-index:1;
   margin-left:@sizeW/4; 
   text-align:center;
   border:0;
  
   
    font-size: @sizeH/2;
    line-height:100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    display:inline-block;
  
  
   &:before{
    content:'';
    position:absolute;
    z-index:2;
    top:0;
    left: -@sizeH/2;
    margin:0;
	  .left-arrow(@sizeH/2,@bg); 
  }
}


.forward_button(@sizeW,@sizeH,@bg,@bgRadius){
   background:@bg;
   border-top-right-radius:0; 
   border-bottom-right-radius:0; 
   border-top-left-radius:@bgRadius;
   border-bottom-left-radius:@bgRadius; 
   width:@sizeW; 
   height:@sizeH;  
   position:relative;
   display:inline-block;
   z-index:1;
   margin-right:@sizeW/4; 
   text-align:right;
   border:0;
   padding:2px 0px 2px 2px;
  
    font-size: @sizeH/2;
    line-height:100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
  
   &:after{
    content:'';
    position:absolute;
    z-index:2;
    top:0;
    right: -@sizeH/2;
    margin:0;
	  .right-arrow(@sizeH/2,@bg); 
  }
}

.next_button(@size,@bgRadius,@bg){
    width:@size;
    height:@size;
    background:@bg;
    border-radius:@bgRadius;
    position:relative;
    border:0;
    margin:0;
    padding:0;
    text-align:center;
   
  &:before{
    content:'>';
    position:relative;
    width:0;
    height:0;
    right:-@size/32;
    top:-@size/16;
    color:red;
    font-size:@size/2;
    line-height:1em;
    padding:0;
    margin:0;
    border:0;
  }
}

.prev_button(@size,@bgRadius,@bg){
    width:@size;
    height:@size;
    background:@bg;
    border-radius:@bgRadius;
    position:relative;
    border:0;
    margin:0;
    padding:0;
    text-align:center;
   
  &:before{
    content:'<';
    position:relative;
    width:0;
    height:0;
    left:-@size/32;
    top:-@size/16;
    color:red;
    font-size:@size/2;
    line-height:1em;
    padding:0;
    margin:0;
    border:0;
  }
}