Button hover

css only - for welliba

by Ercan Cicek

HTML

<button class="text-button custom-primary-1">Button 1</button>
<br /><br /><br /><br />
<button class="text-button custom-primary-2">Button 2</button>
<br /><br /><br /><br />
<button class="text-button custom-primary-3" btncontent="Button 3">
  <span>Button 3</span>
</button>

SCSS

$btnFontsize: 16px;
$primaryColor: rgb(42, 114, 157);
$textOnDarkHighEmph: rgba(248, 248, 253, 0.9);
$defTransition: 0.25s cubic-bezier(0.4, 0, 1, 1);
$defGridMargin: 8px;

button {
  position: relative;
  padding: $defGridMargin $defGridMargin*5;
  border-radius: $defGridMargin;
  border: none;
  cursor: pointer;
  
  &.custom-primary-1 {
    overflow: hidden;
    background-color: $primaryColor;
    color: $textOnDarkHighEmph;
    transition: transform $defTransition;

    &:hover {
      transform: translateY(-5%) scale(1.025);
    }
  }

  &.custom-primary-2 {
    overflow: hidden;
    background-color: $primaryColor;
    color: $textOnDarkHighEmph;
    transition: transform $defTransition;

    &::after {
      content: '';
      position: absolute;
      bottom: $defGridMargin;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      width: calc((100% - 80px) * 0.1);
      border-radius: 1px;
      height: 2px;
      background-color: $textOnDarkHighEmph;
      transition: opacity $defTransition, width $defTransition, border-radius $defTransition;
    }

    &:hover {
      transform: translateY(-5%) scale(1.025);

      &::after {
        opacity: 1;
        width: calc(100% - 80px);
      }
    }
  }
  
  &.custom-primary-3 {
    background-color: $primaryColor;
    color: $textOnDarkHighEmph;
    transition: transform $defTransition;
    
    > span {
      display: inline-block;
      transition: opacity $defTransition, transform $defTransition;
      opacity: 1;
    }
    
    &::after {
      content: attr(btncontent);
      position: absolute;
      left: $defGridMargin*5;
      opacity: 0;
      transform: translateY(66%);
      transition: opacity $defTransition, transform $defTransition;
    }
    
    &:hover {
      transform: translateY(-5%) scale(1.025);
      > span {
        transform: translateY(-66%);
        opacity: 0;
      }
      
      &::after {
        transform: translateY(0);
        opacity: 1;
      }
    }
 ...