Modern Styled Buttons

by howbotnik

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  
  <body>
    <div class="main-content">
  	  <button class="circle-button centre-text">
        <i class="material-icons" style="font-size:25px;">cloud</i>
      </button> 
      <button class="circle-button centre-text">
        <i class="material-icons" style="font-size:25px;">call</i>
      </button>
      <button class="circle-button centre-text">
        <i class="material-icons" style="font-size:25px;">cast</i>
      </button>
      <button class="circle-button centre-text">
        <i class="material-icons" style="font-size:25px;">headset</i>
      </button>
    </div>
  </body>
</html>

CSS

.main-content {
  background-color: #292826;
  height: 100vh;
  color: white;
  padding: 20px;
}

.circle-button {
  border: none;
  outline: none;
  height: 35px;
  width: 35px;
  border-radius: 15px;
  background-color: transparent;
  color: white;
  margin: 10px;
}

.circle-button:hover {
  background-color: #f9f337;
  color: orange;
}

.centre-text {
  display: flex;
  align-items: center;
  justify-content: center;
}


body { padding: 0; margin: 0; }