Design lightning

controller

({
	handleChange: function (cmp, event) {
        // This will contain the string of the "value" attribute of the selected option
        var selectedOptionValue = event.getParam("value");
        alert("Option selected with value: '" + selectedOptionValue + "'");
    }
})

css

.THIS .d-flex{
    display:flex;
}
.THIS .btn{
     font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    border: 1px solid grey;
    height: 40px;
    line-height: 50px;
    padding: 12px;
    border-radius: 5px;
    margin: 5px;
    box-shadow: 1px 1px 5px;
}
.THIS input:checked+label, .THIS input:checked+label{
    background:orange;
}
.THIS input[type='checkbox'], .THIS input[type='radio']{
    display:none;
}
.THIS .wrapper{
     padding: 2rem 1rem;
     display:flex;
        box-shadow: 1px 1px 5px;
    justify-content: space-around;
}
.THIS .label{
    display: block;
    margin-bottom: 10px;
}
.THIS .button_wrapper{
    display: flex;
    align-items: flex-end;
}
.THIS .button_wrapper>button{
     margin: 0 10px;
}
.THIS .form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    margin-top: 3px;
    height: 42px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

DemoApp.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
	
    <div>
    <div class="wrapper">
        
		<div>
        <label>Sales KPI Navigation</label>
        <div class="d-flex">
        <div>
            <input type="checkbox" name="full" id="full" value="full"/>
            <label for="full" class="btn">Full Business View</label>
        </div>
            <div>
                
                <input type="checkbox" name="east" id="east" value="east"/>
                    <label for="east" class="btn">East Zone</label>
            </div>
               <div> 
                    <input type="checkbox" name="West" id="West" value="West"/>
                   <label for="West" class="btn">West Zone
                   </label></div>
                <div>
                    <input type="checkbox" name="North" id="North" value="full"/>
                    <label for="North" class="btn">North Zone
                    </label></div>
                <div>
                    <input type="checkbox" name="South" id="South" value="full"/>
                    <label for="South" class="btn">South Zone
                    </label></div>
        		</div>
            </div>    
         <div>
             
             <label for="sel1">Select ASM for Detailed View</label>
              <select class="form-control" id="sel1">
                <option>All ASMs</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
              </select>
        </div>
        <div>
        <label>Sales KPI Period</label>
        <div class="d-flex">
        <div>
            <input type="radio" name="Period" id="Monthly" value="Monthly"/>
            <label for="Monthly" class="btn">Monthly</label>
        </div>
            <div>
                
                <input type="radio" name="Period" id="Quaterly" value="Quaterly"/>
                    <label for="Quaterly" class="btn">Quaterly</label>
            </div>
               <div> 
                    <input type="radio" name="Period" id="Annually" value="Annually"/>
                   <label for="Annually" class="btn">Annually
                   </label></div>
        		</div>
            </div>
    </div>
        </div>
</aura:component>