🦄 CSS - delightful button press that feels natural

In this short article, I'll show you what I feel to be the perfect combination of CSS transformations for achieving a button interaction that responds to you in the same way that objects do in real world ✨

.btn-natural:active {
  transform: scale(0.96);
  transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1) !important;
}

You can apply the above CSS styles at the global level and make use of the btn-natural class on the button which you wish to make natural. You may also apply these styles directly to the button tag, however this may result in unexpected behaviour when using UI library components.

React Component

import React from 'react';

export default function NaturalButton() {
  return (
    <>
      <button className="btn-natural">Click Me</button>
      {/* Adding all styles in one place only for better understanding */}
      <style>{`
      input, button, submit { border:none; } 

      button{
        cursor: pointer;
        border-radius: 8px;
        padding: 16px;
        background: orchid;
        color: white;
        }
      .btn-natural:active {
        transform: scale(0.96);
        transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1) !important;
      }
     `}</style>
    </>
  );
}

// Line 9: CSS that basically removes default browser styling from button elements

Codesandbox Link - https://codesandbox.io/s/dank-bird-le0hco?file=/NaturalButton.js:0-553

If you would like to read more such articles, let me know and drop a reaction to spread joy 🎉