Buttons · community component

Dark Soft Floating Pill Button

Un botón oscuro extremadamente suave sobre fondo claro con tipografía en guión.

CSSMIT licenseUpdated today

◉ 146 views

Live 1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #dark #minimal
-->
<button class="float-pill">Hello — simple button</button>

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #dark #minimal
-->
<button class="float-pill">Hello — simple button</button>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #dark #minimal
 */

.float-pill {
  padding: 12px 24px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #f4f4f5;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}
.float-pill:hover {
  background: #18181b;
  transform: scale(1.02);
}

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #dark #minimal
 */

.float-pill {
  padding: 12px 24px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #f4f4f5;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}
.float-pill:hover {
  background: #18181b;
  transform: scale(1.02);
}

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 #dark #minimal

Community

Comments 0

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