DEMO:

https://codepen.io/Razvi/pen/adwWKP



<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <style>

    body {margin:0;}

  

    #barraInferior {

    overflow: hidden;

    width: 100%;

    }

    

    #barraInferior ul {

        list-style-type: none;

        margin: 0 auto;

        padding-left: 30% ;

        overflow: hidden;

        background-color: #333;

        position: fixed;

        bottom: 0;

        width: 100%;

        

    }

    

    #barraInferior li {

        float: left;

        

    }

    

    #barraInferior li a {

        display: block;

        color: white;

        text-align: center;

        padding: 14px 16px;

        text-decoration: none;

    }

    

    #barraInferior li a:hover{

        background-color: #111;

    }

    

    #barraInferior li a:active{

        background-color:#4CAF50;

    }

  </style>

</head>


<body>

  <div id="barraInferior">

    <ul>

      <li id="masZoom"><a href="#home">ZOOM +</a></li>

      <li id="menosZoom"><a href="#news">ZOOM -</a></li>

      <li id="cambiarcontraste"> <a href="#contact">CAMBIAR CONTRASTE</a></li>

      <li id="cambiarImagenes"><a href="#contact">CON/SIN IMÁGENES</a></li>

      <li id="visionarInforme"><a href="#about">VISIONAR INFORME</a></li>

    </ul>

  </div>

</body>


</html>