This CSS Squishy Button with Smooth Transition code creates a button with smooth hover effects. The button squishes upon interaction, providing a tactile feel. It enhances user experience by adding visual feedback to button interactions.
You can use this code on your website’s buttons to enhance their appearance and user experience. It adds a modern touch with smooth transitions and squishy effects, making your buttons more engaging. This can help increase user interaction and make your website more visually appealing.
How to Create a Squishy Button With a Smooth Transition
1. Begin by creating a new HTML file in your preferred text editor. Inside the <body> tag, add a <button> element with the desired text content. For example:
<button>Squishy</button>
2. Now, let’s style the button using CSS to achieve the squishy effect and smooth transition. Below is the CSS code:
body{
font-family: sans-serif;
min-height: 100vh;
justify-content: center;
align-items: center;
display: flex;
background-color: #ece9e4 !important;
}
button {
font: inherit;
background-color: #f0f0f0;
border: 0;
color: #242424;
border-radius: 0.5em;
font-size: 3rem;
padding: 0.375em 1em;
font-weight: 600;
text-shadow: 0 0.0625em 0 #fff;
box-shadow: inset 0 0.0625em 0 0 #f4f4f4, 0 0.0625em 0 0 #efefef, 0 0.125em 0 0 #ececec, 0 0.25em 0 0 #e0e0e0, 0 0.3125em 0 0 #dedede, 0 0.375em 0 0 #dcdcdc, 0 0.425em 0 0 #cacaca, 0 0.425em 0.5em 0 #cecece;
transition: 0.15s ease;
pointer: cursor;
}
button:active, button:hover {
translate: 0 0.225em;
box-shadow: inset 0 0.03em 0 0 #f4f4f4, 0 0.03em 0 0 #efefef, 0 0.0625em 0 0 #ececec, 0 0.125em 0 0 #e0e0e0, 0 0.125em 0 0 #dedede, 0 0.2em 0 0 #dcdcdc, 0 0.225em 0 0 #cacaca, 0 0.225em 0.375em 0 #cecece;
cursor: pointer;
}
Paste the CSS code inside <style> tags in the <head> section of your HTML file. Save your changes. Open your HTML file in a web browser. You should see the button styled with the squishy effect and smooth transition.
That’s all! hopefully, you have successfully created Squishy Button in your web/app project using HTML & CSS. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
- Circle Loader Animation CSS
- CSS Glass Effect For div Element
- Pure CSS Cube Box Animation On Hover
- Full Screen Width and Height Sections Using CSS
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.