Fictition Login/Join Button

Button I designed for Luke's website

by Trevin Avery

HTML

<div id="spacer">
  <button class="standard left">Login</button><button class="standard right">Join</button>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400&display=swap');

#spacer {
  position: relative;
  border-radius: 10px;
  display: inline-block;
}

.standard {
  padding: 0.4em;
  
  outline: none;
  background: black;
  color: white;
  border: 1px solid black;
  width: 5em;
  
  transition:
    opacity 0.4s ease-in-out, 
    color 0.4s ease-in-out, 
    background 0.4s ease-in-out, 
    border 0.4s ease-in-out;
}

.standard.right {
  border-radius: 0 10px 10px 0;
  clip-path: polygon(1em 0, 100% 0, 100% 100%, 0 100%);
}

.standard.left {
  clip-path: polygon(0 0, 100% 0, calc(100% - 1em) 100%, 0 100%);
  margin-right: -1em;
  border-radius: 10px 0 0 10px;
  background: white;
  color: black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-top: 1px solid black;
}

#spacer:hover > .standard {
  opacity: 0.2;
}

#spacer:hover > .standard:hover {
  background: #f1c405;
  border: 1px solid #f1c405;
  color: black;
  cursor: pointer;
  opacity: 1;
}

.standard.right:hover ~ .standard.left {
  border-left: 1px solid #f1c405;
}

.standard.left:hover + .standard.right {
  border-right: 1px solid white;
  opacity: 0.1;
}