ol3 Pan Buttons

HTML

<script src="http://openlayers.org/en/v3.10.0/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.10.0/css/ol.css">
<div id="text">ol3 Pan Buttons</div>
    <div id="custom_pan_panel" class="ol-control">

          <button id="up" onclick="panfunction(this)" class="vertical" type="button" title="Up"><span class="ol-compass" style="transform: rotate(0deg);">&#8679;</span></button>
   

<button type="button" id="right" onclick="panfunction(this)" title="Reset rotation"><span class="ol-compass" style="transform: rotate(0deg);">&#8680;</span></button>
<button  id="left" onclick="panfunction(this)" type="button" title="Reset rotation"><span class="ol-compass" style="transform: rotate(0deg);">&#8678;</span></button>
   
  
   
    <button id="down" onclick="panfunction(this)" class="ol-rotate-reset vertical" type="button" title="Reset rotation"><span class="ol-compass" style="transform: rotate(0deg);">&#8681;</span></button>
   
</div>



<div id="map" class="map"></div>
<div id="debug-log"></div>

CSS

html,body
{
    
    width:100%;
    height:100%;
}
#text
{
    height:30px;
    
}
#map
{
    
    width:calc(100% - 20px);
    height:calc(100% - 50px);
}
#custom_pan_panel
{
    z-index:10000 !important;
    top: calc(90% - 76px) !important;
        float:left;
    width:76px;
}
.vertical
{
        margin-left: 26px !important;
}

#right
{

    right: 0px !important;
    position: absolute;
    bottom: 28px;
}

JavaScript

var centerCoordinates = ol.proj.transform( [7.8, 47.933], "EPSG:4326", "EPSG:3857");

var view = new ol.View({
    center: centerCoordinates,
    zoom: 13
});




var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: view
});

panfunction=function(value)
{
    var current_extent=map.getView().calculateExtent(map.getSize()); 
    var current_center=map.getView().getCenter();
    
    var pan = ol.animation.pan({
          source: map.getView().getCenter()
        });
        map.beforeRender(pan);
        cur_loc=[
        current_extent[ 10 ],
        current_center[ 1 ]
        		];
        
        map.getView().setCenter(cur_loc);
    }