onPress states

for welliba

by Ercan Cicek

HTML

<div id="wrapper">
  <h2>All filled primary buttons</h2>
  <span>
    <span>
      box-shadow: inset 0 -4px 0px rgba(0, 0, 0, 0.33);
    </span>
    <br />
    <span>
      transform: scale(0.96);
    </span>
    <br />
    <span>
      0,05s easeIn
    </span>
  </span>
  <div class="row">
    <div>
      <h3>Interactive</h3>
      <button class="btn-basic transition-scale-shadow">
        <span>Button</span>
      </button>
    </div>
    <div>
      <h3>onPress style</h3>
      <button class="btn-basic transition-scale-shadow active">
        <span>Button</span>
      </button>
    </div>
  </div>
  <div class="row">
    <div>
      <h3>Interactive</h3>
      <button class="fab-basic transition-scale-shadow">
        <span>></span>
      </button>
    </div>
    <div>
      <h3>onPress style</h3>
      <button class="fab-basic transition-scale-shadow active">
        <span>></span>
      </button>
    </div>
  </div>

  <hr>

  <h2>All stroked buttons</h2>
  <span>
    same as above
  </span>
  <div class="row">
    <div>
      <h3>Interactive</h3>
      <button class="btn-stroked transition-scale-shadow">
        <span>Button</span>
      </button>
    </div>
    <div>
      <h3>onPress style</h3>
      <button class="btn-stroked transition-scale-shadow active">
        <span>Button</span>
      </button>
    </div>
  </div>
  <div class="row">
    <div>
      <h3>Interactive</h3>
      <button class="fab-stroked transition-scale-shadow">
        <span>></span>
      </button>
    </div>
    <div>
      <h3>onPress style</h3>
      <button class="fab-stroked transition-scale-shadow active">
        <span>></span>
      </button>
    </div>
  </div>

  <hr>

  <h2>Flat buttons & mini-widgets in explore section</h2>
  <span>
    <span>
      transform: scale(0.96);
    </span>
    <br />
    <span>
      0,05s easeIn
    </span>
  </span>
  <div class="row">
    <div>
      <h3>Interactive</h3>
      <button class="btn-flat transition-scale-only">
       ...

SCSS

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

html, body {
  background-color: #F5FDFC;
  div#wrapper {
  display: flex;
  flex-direction: column;

    > h2 {
      margin-top: 0;
      margin-bottom: 0;
    }

    > .row {
      display: flex;
      flex-direction: row;
      gap: 64px;
      
      .transition-scale-shadow {
       transition: box-shadow 0.05s ease-in, transform 0.05s ease-in;

        &:active,
        &.active {
          box-shadow: inset 0 -4px 0px rgba(0, 0, 0, 0.33);
          transform: scale(0.96);
        }
      }
      
      .transition-scale-only {
        transition: transform 0.05s ease-in;

        &:active,
        &.active {
          transform: scale(0.96);
        }
      }

      .btn-basic {
        > span {
          font-family: 'Poppins', sans-serif;
          font-weight: 200;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0.005em;
        }

        padding: 12px 40px;
        background: #2A729D;
        border-radius: 8px;
        color: #F8F8FDE5;
        border: none;
      }
      
      .fab-basic {
        width: 56px;
        height: 56px;
        background: #2A729D;
        border-radius: 16px;
        color: #F8F8FDE5;
        border: none;
        box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25);
      }
      
      .btn-stroked {
        > span {
          font-family: 'Poppins', sans-serif;
          font-weight: 200;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0.005em;
        }

        padding: 12px 40px;
        border-radius: 8px;
        background-color: transparent;
        color: #2A729D;
        border: 1px solid #D6D6D6;
      }
      
      .fab-stroked {
        width: 56px;
        height: 56px;
        background: #FFFFFF;
        border-radius: 16px;
        color: #2A729D;
        border: none;
        box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25);
        &:active,...