Button states

by Milan Gladiš

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
  </head>

  <body>
  
    <div class="buttons">

      <button class="button button-primary">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13.4286 19C12.2857 17.8462 10.7619 16.3077 13.8095 14.7692C17.619 12.8462 18 12.0769 18 9.76923C18 6.58297 14.4183 4 10 4C5.58172 4 2 6.58297 2 9.76923C2 12.3827 4.40973 14.5903 7.71429 15.2996" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        Start building
      </button>

      <button class="button button-secondary">
        Start building
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7929 5.79289C12.1834 5.40237 12.8166 5.40237 13.2071 5.79289L16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L13.2071 14.2071C12.8166 14.5976 12.1834 14.5976 11.7929 14.2071C11.4024 13.8166 11.4024 13.1834 11.7929 12.7929L13.5858 11H4C3.44772 11 3 10.5523 3 10C3 9.44772 3.44772 9 4 9H13.5858L11.7929 7.20711C11.4024 6.81658 11.4024 6.18342 11.7929 5.79289Z" fill="url(#paint0_linear_169_2045)"/>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7929 5.79289C12.1834 5.40237 12.8166 5.40237 13.2071 5.79289L16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L13.2071 14.2071C12.8166 14.5976 12.1834 14.5976 11.7929 14.2071C11.4024 13.8166 11.4024 13.1834 11.7929 12.7929L13.5858 11H4C3.44772 11 3 10.5523 3 10C3 9.44772 3.44772 9 4 9H13.5858L11.7929 7.20711C11.4024 6.81658 11.4024 6.18342 11.7929 5.79289Z" fill="#A000FA"/>
    ...

CSS

html {
  height: 100%;
  font-family: 'Inter', sans-serif;
  color: #fff;
  font-size: 10px;
}

body {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  background-color: #151617;
}

.buttons {
  display: flex;
  gap: 16px;
}

.button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2.4rem;
  line-height: 4.8rem;
	background-color: #A000FA;
  color: #fff;
  font-size: 1.6rem;
  border-radius: .8rem;
  cursor: pointer;
  transition: all 0.1s ease;
  user-select: none;
  outline: none;
  appearance: none;
  border: none;    
}

.button-primary {
  
}

.button:hover {
  background-color: #B333FB;
  box-shadow: 0 0 0 2px #B333FB;
}


.button:focus {
  /* background-color: #A000FA; */
  box-shadow: 0 0 0 2px #B333FB;
}

.button:active {
  background-color: #8000C8;
  box-shadow: 0 0 0 0px #A000FA;
}


.button-secondary {
  box-shadow: inset 0 0 0 2px #A000FA;
  padding: 0 1.6rem;
  color: #A000FA;
  background-color: transparent;
}

.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #B333FB;
  box-shadow: 0 0 0 2px #A000FA;
  background-color: transparent;
}

.button-secondary:active {

  box-shadow: inset 0 0 0 2px #8000C8;
}