Css Pause button icon

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="shortcut icon" href="https://1xpto.netlify.app/items/favicon.gif" type="image/x-icon">
  <link rel="name" href="https://www.facebook.com/ManuelJSAndrade/">
  <link rel="name" href="https://www.instagram.com/jolie1xpto/">
  <link rel="tag" href="https://1xpto.netlify.app/articles/html/Pause button icon">
  <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pause button icon</title>
  <style>

#pauseButtonIcon {
  width: 100px;
  height: 100px;
  border: 5px solid red;
  border-radius: 50%;
  background-color: transparent;
  transform: scale(3);
  transform-origin: left top;
  margin: 100px 200px;
}

#pauseIconContainer {
  width: 30px;
  height: 50px;
  display: inline-block;
}

#leftIcon {
  border: 5px solid red;
  display: inline-block;
  height: 40px;
  float: left;
}
#rightIcon {
  border: 5px solid red;
  display: inline-block;
  height: 40px;
  float: right;
}


</style>
</head>
<body>

<button id='pauseButtonIcon'>
  <div id='pauseIconContainer'>
    <span id='leftIcon'></span>
    <span id='rightIcon'></span>
  </div>
</button>


  <script></script>
</body>
</html>