Css Unmute 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/Unmute 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>Unmute button icon</title>
  <style>

#unmuteButtonIcon {
  width: 100px;
  height: 100px;
  border: 5px solid red;
  border-radius: 50%;
  background-color: transparent;
  transform: scale(3);
  transform-origin: left top;
  margin: 100px 200px;
}
#unmuteContainer {
  width: 50px;
  height: 70px;
  display: inline-block;
}
#base1 {
  border: 15px solid red;
  display: inline-block;
  height: 30px;
  border-radius: 30px;
  margin: 5px 0;
}
#base2 {
  border: 5px solid red;
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 50%;
  border-left: 5px solid transparent;
  border-top: 5px solid transparent;
  transform: rotate(45deg);
  margin: -48px 0;
}

#base3 {
  border: 5px solid red;
  display: inline-block;
  height: 5px;
  margin: 43px 0;
}


</style>
</head>
<body>

<button id='unmuteButtonIcon'>
  <div id='unmuteContainer'>
    <center>
      <span id='base1'></span>
      <span id='base2'></span>
      <span id='base3'></span>
    </center>
  </div>
</button>


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