Create Up and Down arrow icons in buttons using pure CSS - HTML CSS CSS Form

HTML CSS examples for CSS Form:input image button

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input image button

Description

Create Up and Down arrow icons in buttons using pure CSS

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.positionCameras ul, .positionCameras li {
   margin: 0;
   padding: 0;
   list-style: none;
   display: inline-block;
   vertical-align:top;
}
.positionCameras li.cameraLeft, .positionCameras li.cameraIcon, .positionCameras li.cameraRight {
   width: 25px;
   height: 25px;
   cursor: pointer;
   background: #cccccc;
   margin: 5px;
   border-radius: 5px;
   border: 1px solid #aaaaaa;
   box-shadow: 1px 2px 15px #cccccc;<!--   w w w.j  a  va 2  s .c  om-->
   text-align:center;
   line-height:20px;
}
.positionCameras li.cameraLeft:before {
   content:"";
   display:inline-block;
   width: 0;
   height: 0;
   vertical-align:middle;
   border-style: solid;
   border-width: 0 5px 10px 5px;
   border-color: transparent transparent #007bff transparent;
}
.positionCameras li.cameraIcon {
   cursor: default;
}
.positionCameras li.cameraRight:before {
   content:'';
   display:inline-block;
   vertical-align:middle;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 8.7px 5px 0 5px;
   border-color: #007bff transparent transparent transparent;
}
.cameraIcon:before {
   content:'';
   display:inline-block;
   vertical-align:middle;
   height:10px;
   width:10px;
   border-radius:100%;
   box-shadow:0 0 0 3px gray, inset -1px -1px 0 3px black;
}


      </style> 
 </head> 
 <body> 
  <div class="positionCameras"> 
   <ul> 
    <li title="Move Up" class="cameraLeft" id="cameraUp"></li> 
    <li title="Camera" class="cameraIcon"></li> 
    <li title="Move Down" class="cameraRight" id="cameraDown"></li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials