0
219
Views¿Cómo puedo hacer que mi vástago de flecha izquierda/derecha aparezca al pasar el mouse?
Para aclarar, estoy tratando de lograr el efecto de desplazamiento que puedes ver en Stripe .
Como puede ver, cuando pasa el cursor sobre uno de los botones, el signo de intercalación a la izquierda muestra su "tallo", si puedo llamarlo así. Mira estas capturas de pantalla tomadas del sitio:
Botón sin desplazamiento:
Botón al pasar el mouse:
También me preguntaba si esto es posible usando iconos impresionantes de fuentes, aquí está mi código:
button { background: #0a2540; border: 0; border-radius: 50px; color: #fff; cursor: pointer; font-size: 0.75rem; font-weight: 600; outline: 0; padding: 8px 15px; } button i { margin-left: 10px; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" /> <button>Hover Me<i class="fa-solid fa-angle-right"></i></button
·
Santiago Trujillo
1 answers
Answer question0
Necesitas usar un SVG y luego hacer algo de magia con CSS, aquí está mi intento, espero que tenga sentido.
button { background: #0a2540; border: 0; border-radius: 50px; color: #fff; cursor: pointer; font-size: 0.75rem; outline: 0; padding: 7px 15px; transition-property: background-color,opacity; } button svg { margin-left: 10px; } button:hover { background-color: #6C7D8D; } button:hover .HoverArrow__linePath { opacity:1; } button:hover .HoverArrow__tipPath { transform:translateX(3px); } .HoverArrow { --arrowSpacing: 5px; --arrowHoverTransition: 150ms cubic-bezier(0.215,0.61,0.355,1); --arrowHoverOffset: translateX(3px); --arrowTipTransform: none; --arrowLineOpacity: 0; position: relative; top: 1px; margin-left: var(--arrowSpacing); stroke-width: 2px; fill: none; stroke: currentColor; } .HoverArrow__linePath { --arrowSpacing: 5px; --arrowHoverTransition: 150ms cubic-bezier(0.215,0.61,0.355,1); --arrowHoverOffset: translateX(3px); --arrowTipTransform: none; --arrowLineOpacity: 0; opacity: var(--arrowLineOpacity); transition: opacity var(--hoverTransition,var(--arrowHoverTransition)); } .HoverArrow__tipPath { transform: none; transition: transform var(--hoverTransition, 150ms cubic-bezier(0.215,0.61,0.355,1)); } button:hover .HoverArrow__linePath { opacity: 1; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" /> <button>Hover Me <svg class="HoverArrow" width="10" height="10" aria-hidden="true"><g fill-rule="evenodd"><path class="HoverArrow__linePath" d="M0 5h7"/><path class="HoverArrow__tipPath" d="m1 1 4 4-4 4"/></g></svg></button>
·
Santiago Trujillo
Report
Answer question