Floating Cart Trigger with Animated Badge

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="cart-trigger-wrap"><button class="cart-trigger"><span class="c-icon">🛒</span><span class="c-badge"><span class="badge-pulse"></span>3</span></button></div>

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

.cart-trigger-wrap { display: flex; justify-content: center; padding: 20px; margin: auto; }
.cart-trigger { position: relative; background: #ffffff; border: none; border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.15); cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cart-trigger:hover { transform: scale(1.12) rotate(-6deg); }
.c-icon { font-size: 18px; }
.c-badge { position: absolute; top: -2px; right: -2px; background: #ef4444; color: #fff; font-size: 8px; font-weight: 900; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #ffffff; font-family: system-ui, sans-serif; }
.badge-pulse { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #ef4444; opacity: 0.7; animation: badgePing 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; z-index: -1; }
@keyframes badgePing { 75%, 100% { transform: scale(1.8); opacity: 0; } }