Loaders · community component

Pure CSS Slide Notification Badge

Insignia de alerta flotante interactiva que se desglosa al posicionar el ratón.

CSSMIT licenseUpdated today

◉ 560 views

Live 1 line⌘Z Undo

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="notif-pill">
  <span class="notif-dot"></span>
  <span class="notif-txt">New System Update Available</span>
</div>

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="notif-pill">
  <span class="notif-dot"></span>
  <span class="notif-txt">New System Update Available</span>
</div>

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

.notif-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 20px; font-family: system-ui, sans-serif; cursor: pointer; transition: all 0.3s ease; }
.notif-dot { width: 8px; height: 8px; background: #3b82f6; border-radius: 50%; box-shadow: 0 0 8px #3b82f6; }
.notif-txt { font-size: 11px; font-weight: 600; color: #60a5fa; }
.notif-pill:hover { background: rgba(59, 130, 246, 0.2); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); }

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

.notif-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 20px; font-family: system-ui, sans-serif; cursor: pointer; transition: all 0.3s ease; }
.notif-dot { width: 8px; height: 8px; background: #3b82f6; border-radius: 50%; box-shadow: 0 0 8px #3b82f6; }
.notif-txt { font-size: 11px; font-weight: 600; color: #60a5fa; }
.notif-pill:hover { background: rgba(59, 130, 246, 0.2); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); }

CSS colorsDetected automatically · edit to replace everywhere

0 colors

FormatCSS

CategoryLoaders

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.