- Published on
... views
🦄 CSS - delightful button press that feels natural
- Authors
- Name
- Rahul Suresh
- @fireblaze_15
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 🎉