Buttons · community component

Retro Synth Wave Push Key

80s styled glossy synth key button with dual neon shadow elevation.

CSSMIT licenseUpdated today

◉ 0 views

Live 1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="synthkey-btn">PLAY TAPE</button>

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="synthkey-btn">PLAY TAPE</button>

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

.synthkey-btn { background: linear-gradient(180deg, #ff2a85, #d90429); color: #fff; border: 1.5px solid #fff; padding: 8px 18px; font-family: monospace; font-size: 10px; font-weight: 900; border-radius: 6px; cursor: pointer; box-shadow: 0 4px 0 #800020, 0 8px 15px rgba(255, 42, 133, 0.4); display: block; margin: auto; transition: transform 0.1s, box-shadow 0.1s; }
.synthkey-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #800020, 0 2px 5px rgba(255, 42, 133, 0.4); }

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

.synthkey-btn { background: linear-gradient(180deg, #ff2a85, #d90429); color: #fff; border: 1.5px solid #fff; padding: 8px 18px; font-family: monospace; font-size: 10px; font-weight: 900; border-radius: 6px; cursor: pointer; box-shadow: 0 4px 0 #800020, 0 8px 15px rgba(255, 42, 133, 0.4); display: block; margin: auto; transition: transform 0.1s, box-shadow 0.1s; }
.synthkey-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #800020, 0 2px 5px rgba(255, 42, 133, 0.4); }

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.