Need Help manipulating individual buttons in CSS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Stopwatch deesons practical</title>
		<link rel="stylesheet" href="Stopwatch.css">
    </head>
    <body>

	<div class="stopwatchBlock">

	<div class="stopwatch">00:00:00:00</div>
		<ul class="laps"></ul>


        <div class="controls">
		<button onclick="start()">Start</button>
		<button onclick="stop()">Stop</button>
		<button onclick="reset()">Reset</button>
		<button onclick="lap()">Lap</button>
		<button onclick="resetLaps()">Reset Laps</button>


		</div>


		</div>

		<script src="Stopwatch.js"></script>

    </body>
</html>


//css

.stopwatchBlock {
  width: 500px;
  height: 200px;
  background-color: #000;
  border-radius: 5px;
  box-shadow: 0 4px rgba(0, 0, 0, 0.75), 0 0 1px rgba(0, 0, 0, 0.15);
  padding: 100px;
}

.stopwatchBlock, .stopwatchBlock * {
  transition: all 0.15s ease-out;
}

.stopwatchBlock .controls {
  display: flex;
}

.stopwatchBlock .controls button {
  flex-grow: 1;
  margin: 20px 5px 10px 10px;
  padding: 10px 0;
  border-radius: 5px;
  border: 0;
  outline: 0;
  font-size: 16px;
  color: white;
  background-color: orange;
  cursor: pointer;
  font-weight: bold;
}

.stopwatchBlock .controls button:active {
  margin-bottom: 0;
  margin-top: 4px;
}

.stopwatchBlock .controls .start {
  background-color: #5d5;
}

.stopwatchBlock .controls .start:hover {
  background-color: #6e6;
}

.stopwatchBlock .controls .stop {
  background-color: #d55;
}

.stopwatchBlock .controls .stop:hover {
  background-color: #e66;
}

.stopwatchBlock .controls .reset {
  background-color: #55d;
}

.stopwatchBlock .controls .reset:hover {
  background-color: #66e;
}

@font-face {
	font-family: 'digital-7';
	src: url('digital-7.ttf');
}

.stopwatchBlock .stopwatch {
  margin-left: 150px;
  font-size: 50px;
  width: 100px;
  color: #fff;
  shadow: 0px 0px 5px #fff;
  font-family: 'digital-7', sans-serif;
  margin-top: 10px;

}

.stopwatchBlock .stopwatch :not(:last-child):after {
  content: ':';
}

//JavaScript

var ms=0;
var s=0;
var m=0;
var h=0;

var timer;

var stopwatchElement = document.querySelector('.stopwatch');
var lapsContainer = document.querySelector('.laps');


function start() {
	if (!timer) {
	timer = setInterval(run, 10);
   }
}

function run() {
	stopwatchElement.textContent = getTimer();
	ms++;
	if(ms == 100) {
		ms =0;
		s++;
	}
	if (s == 60) {
		s = 0;
		s++;
	}
}

function stop() {
	start()
	stopTimer()
}

function stopTimer () {
	clearInterval(timer);
	timer = false;
}

function getTimer() {
	return (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" +
	(s < 10 ? "0" + s : s) + ":" + (ms < 10 ? "0" + ms : ms);
}

function reset() {
	stopTimer()
	ms = 0;
	s = 0;
	m = 0;
	h = 0;
	stopwatchElement.textContent = getTimer();
}

function lap() {
	if(timer) {
		var li = document.createElement('li');
		li.innerText = getTimer();
		lapsContainer.appendChild(li);
	}
}

function resetLaps() {
	lapsContainer.innerHTML = '';
}