JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.camptocamp.com/files/fredj/geolocation-example/resources/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dev.camptocamp.com/files/fredj/geolocation-example/resources/bootstrap/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol-debug.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.css">
<link rel="stylesheet" href="http://dev.camptocamp.com/files/fredj/geolocation-example/resources/layout.css">
<body onload="init()">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container"> <a class="brand" href="./">OpenLayers 3 Custom Control Example</a>
                

            </div>
            
        </div>
        click on the <b>"E"</b>-button to zoom to Berlin
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div id="map" class="map"></div>
                Modified from example at: dev.camptocamp.com/files/fredj/geolocation-example/examples/custom-controls.html
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                 <h4 id="title">Custom controls</h4>

                <p id="shortdesc">This example shows how to create custom controls.</p>
                <div id="docs">
                    <p>This example creates a "zoom to extent" button. Per default, the zoom extent control use the map projection extent.</p>
                </div>
                
            </div>
        </div>
    </div>
</body>

CSS

.zoom-extent {
    position: absolute;
    top: 65px;
    left: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 2px;
}
.zoom-extent a {
    display: block;
    margin: 1px;
    padding: 0;
    color: white;
    font-size: 18px;
    font-family:'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    height: 22px;
    width: 22px;
    line-height: 19px;
    background: rgba(0, 60, 136, 0.5);
}
.zoom-extent a:hover {
    background: rgba(0, 60, 136, 0.7);
}
.zoom-to {
    border-radius: 2px 2px 0 0;
}
.zoom-to:before {
    content:"E";
}

JavaScript

var view, map;

function init() {
    /**
     * Define a namespace for the application.
     */
    window.app = {};
    var app = window.app;


    //
    // Define zoom extent control.
    //



    /**
     * @constructor
     * @extends {ol.control.Control}
     * @param {Object=} opt_options Control options.
     */
    app.ZoomExtentControl = function (opt_options) {

        var options = opt_options || {};
        this.extent_ = options.extent;

        var anchor = document.createElement('a');
        anchor.href = '#zoom-to';
        anchor.className = 'zoom-to';

        var this_ = this;
        var handleZoomTo = function (e) {
            this_.handleZoomTo(e);
        };

        anchor.addEventListener('click', handleZoomTo, false);
        anchor.addEventListener('touchstart', handleZoomTo, false);

        var element = document.createElement('div');
        element.className = 'zoom-extent ol-unselectable';
        element.appendChild(anchor);

        ol.control.Control.call(this, {
            element: element,
            map: options.map,
            target: options.target
        });

    };
    ol.inherits(app.ZoomExtentControl, ol.control.Control);


    /**
     * @param {Event} e Browser event.
     */
    app.ZoomExtentControl.prototype.handleZoomTo = function (e) {
        // prevent #zoomTo anchor from getting appended to the url
        e.preventDefault();

        var map = this.getMap();
        var view = map.getView();
        view.fit(this.extent_, map.getSize());
    };


    /**
     * Overload setMap to use the view projection's validity extent
     * if no extent was passed to the constructor.
     * @param {ol.Map} map Map.
     */
    app.ZoomExtentControl.prototype.setMap = function (map) {
        ol.control.Control.prototype.setMap.call(this, map);
        if (map && !this.extent_) {
            this.extent_ = map.getView().getProjection().getExtent();
        }
    };


    //
    // Create map, giving it a zoom...