<style type="text/css" >

    label.btn {
        border-radius: 15px 15px 15px 15px;
        -moz-border-radius: 15px 15px 15px 15px;
        -webkit-border-radius: 15px 15px 15px 15px;
    }

    label.btn.entrar {
        border: 2px dotted #00a100;
    }
    label.btn.salir {
        border: 2px dotted #cddb09;
    }
    
    label.btn.entrar:hover {
        border: 3px solid #00a100;
    }
    label.btn.salir:hover {
        border: 3px solid #cddb09;
    }
    
    label.btn span {
        font-size: 1.5em ;
    }

    label input[type="radio"] ~ i.fa.fa-circle-o{
        color: #c8c8c8;    display: inline;
    }
    label input[type="radio"] ~ i.fa.fa-dot-circle-o{
        display: none;
    }
    label input[type="radio"]:checked ~ i.fa.fa-circle-o{
        display: none;
    }
    label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o{
        color: #7AA3CC;    display: inline;
    }
    label:hover input[type="radio"] ~ i.fa {
        color: #7AA3CC;
    }

    label input[type="checkbox"] ~ i.fa.fa-square-o{
        color: #c8c8c8;    display: inline;
    }
    label input[type="checkbox"] ~ i.fa.fa-check-square-o{
        display: none;
    }
    label input[type="checkbox"]:checked ~ i.fa.fa-square-o{
        display: none;
    }
    label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o{
        color: #7AA3CC;    display: inline;
    }
    label:hover input[type="checkbox"] ~ i.fa {
        color: #7AA3CC;
    }

    div[data-toggle="buttons"] label.active{
        color: #7AA3CC;
    }

    div[data-toggle="buttons"] label {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 2em;
        text-align: left;
        white-space: nowrap;
        vertical-align: top;
        cursor: pointer;
        background-color: none;
        border: 0px solid 
            #c8c8c8;
        border-radius: 3px;
        color: #c8c8c8;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    div[data-toggle="buttons"] label:hover {
        color: #7AA3CC;
    }

    div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-xs-12 text-center">            
            <div class="btn-group btn-group-justified btn-group-lg" data-toggle="buttons">
                <label class="btn entrar">
                    <input type="radio" id="sentido-entrada" name="sentido" value="ENTRADA" required=""><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i> <span>  ENTRANDO</span>
                </label>
                <label class="btn salir">
                    <input type="radio"  id="sentido-salida" name="sentido" value="SALIDA" required=""><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-dot-circle-o fa-2x"></i><span> SALIENDO</span>
                </label>
            </div>

        </div>
    </div>
</div>