Buttons · community component

Tactile Claymorphism Button

Botón con estética 3D estilo arcilla suave (Claymorphic) y hundimiento físico al hacer click.

CSSMIT licenseUpdated today

◉ 0 views

Live 1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="btn-499">Press Me</button>

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="btn-499">Press Me</button>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.btn-499 { padding: 16px 36px; background: #818cf8; border: none; border-radius: 20px; color: #fff; font-family: system-ui, sans-serif; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 8px 8px 16px #6366f1, -8px -8px 16px #a5b4fc, inset 2px 2px 4px rgba(255,255,255,0.4); transition: all 0.2s ease; }
.btn-499:hover { transform: translateY(-2px); box-shadow: 10px 10px 20px #6366f1, -10px -10px 20px #a5b4fc, inset 2px 2px 4px rgba(255,255,255,0.6); }
.btn-499:active { transform: translateY(2px); box-shadow: 4px 4px 8px #6366f1, -4px -4px 8px #a5b4fc, inset 4px 4px 8px rgba(0,0,0,0.2); }

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.btn-499 { padding: 16px 36px; background: #818cf8; border: none; border-radius: 20px; color: #fff; font-family: system-ui, sans-serif; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 8px 8px 16px #6366f1, -8px -8px 16px #a5b4fc, inset 2px 2px 4px rgba(255,255,255,0.4); transition: all 0.2s ease; }
.btn-499:hover { transform: translateY(-2px); box-shadow: 10px 10px 20px #6366f1, -10px -10px 20px #a5b4fc, inset 2px 2px 4px rgba(255,255,255,0.6); }
.btn-499:active { transform: translateY(2px); box-shadow: 4px 4px 8px #6366f1, -4px -4px 8px #a5b4fc, inset 4px 4px 8px rgba(0,0,0,0.2); }

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryButtons

AccessibilityKeyboard ready

Explore similar parts →

Created by

codepeek

@codepeek

Open-source licenseMIT

Use, copy, modify, publish, distribute and sell this UI element in personal or commercial work.

Keep the original copyright and MIT notice in substantial copies. Provided “as is”, without warranty.

Read the MIT license

Used tags

#buttons #css #interface #opensource #codepeek

Community

Comments 0

One main comment per member. Conversations can have unlimited replies.