Pulsante con effetto?

Preparati a tuffarti in un mondo di magia e animazioni CSS: questo codice
trasforma i pulsanti in veri protagonisti, regalandogli effetti visivi
sorprendenti che li fanno brillare, pulsare e quasi danzare al passaggio del
mouse! Qui trovi una panoramica degli effetti applicati ai pulsanti.

Effetto “Riflesso” sul Testo dei Link

I pulsanti realizzati con le classi a.ilmiopulsante e
a.ilmiopulsantesfondobianco sfruttano un fantastico
trucco: il background-clip applicato al testo!

• Gradienti animati:
  un gradiente lineare, che sfiora
  varie tonalità (da quasi bianco a un azzurro brillante), viene definito e
  poi animato grazie alla regola @keyframes riflesso.
  Questo crea un effetto di luce che scorre lungo il testo, come se il
  pulsante fosse baciato da un riflesso in movimento!

• Transizioni dinamiche:
  al passaggio del mouse,
  l’animazione si ferma e il colore del testo cambia, dando un feedback visivo
  immediato e divertente. Un vero tocco di brio per attirare l’attenzione!

---

Pulsante 1: stile per sfondo scuro, Glow On Hover.

HTML Pulsante 1

</p> <div style="margin:20px; padding:10px; background-color:black; text-aling:center;"> <button class="glow-on-hover" type="button">PROVAMI 1</button> </div> <p>

CSS Pulsante 1

<br /> /* —– Pulsante 1 ——- */<br /> .glow-on-hover {<br /> width: 220px;<br /> height: 50px;<br /> border: none;<br /> outline: none;<br /> color: #fff;<br /> background: #111;<br /> cursor: pointer;<br /> position: relative;<br /> z-index: 0;<br /> border-radius: 10px;<br /> }</p> <p>.glow-on-hover:before {<br /> content: ”;<br /> background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);<br /> position: absolute;<br /> top: -2px;<br /> left:-2px;<br /> background-size: 400%;<br /> z-index: -1;<br /> filter: blur(5px);<br /> width: calc(100% + 4px);<br /> height: calc(100% + 4px);<br /> animation: glowing 20s linear infinite;<br /> opacity: 0;<br /> transition: opacity .3s ease-in-out;<br /> border-radius: 10px;<br /> }</p> <p>.glow-on-hover:active {<br /> color: #000<br /> }</p> <p>.glow-on-hover:active:after {<br /> background: transparent;<br /> }</p> <p>.glow-on-hover:hover:before {<br /> opacity: 1;<br /> }</p> <p>.glow-on-hover:after {<br /> z-index: -1;<br /> content: ”;<br /> position: absolute;<br /> width: 100%;<br /> height: 100%;<br /> background: #111;<br /> left: 0;<br /> top: 0;<br /> border-radius: 10px;<br /> }</p> <p>@keyframes glowing {<br /> 0% { background-position: 0 0; }<br /> 50% { background-position: 400% 0; }<br /> 100% { background-position: 0 0; }<br /> }<br /> /* —– FINE Pulsante 1 ——- */<br />

---

Pulsante 2: L’Arte dell’SVG

HTML Pulsante 2

</p> <div style="background: #5CA4EA; padding:50px;"> <div class="lpcenter"> <button class="lpbtn"><br /> <svg width="180px" height="60px" viewbox="0 0 180 60" class="lpborder"> <polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" /> <polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" /> </svg><br /> <span>HOVER ME</span><br /> </button> </div> </div> <p>

CSS Pulsante 2

<br /> /* ----- Pulsante 2 ------- */<br /> .lpcenter {<br /> width: 180px;<br /> height: 60px;<br /> position: relative;<br /> }</p> <p>.lpbtn {<br /> width: 180px;<br /> height: 60px;<br /> cursor: pointer;<br /> background: transparent;<br /> border: 1px solid #91C9FF;<br /> outline: none;<br /> transition: 1s ease-in-out;<br /> }</p> <p>svg {<br /> position: absolute;<br /> left: 0;<br /> top: 0;<br /> fill: none;<br /> stroke: #fff;<br /> stroke-dasharray: 150 480;<br /> stroke-dashoffset: 150;<br /> transition: 1s ease-in-out;<br /> }</p> <p>.lpbtn:hover {<br /> transition: 1s ease-in-out;<br /> background: #4F95DA;<br /> }</p> <p>.lpbtn:hover svg {<br /> stroke-dashoffset: -480;<br /> }</p> <p>.lpbtn span {<br /> color: white;<br /> font-size: 18px;<br /> font-weight: 100;<br /> }<br /> /* ----- Pulsante 2 ------- */<br />

---

Pulsante 3: Semplice ma Efficace

HTML Pulsante 3

</p> <div style="background: #5CA4EA; padding:50px;"> <div class="btn btn-three"> <span style="font-size:150%;">PROVAMI 3</span> </div> </div> <p>

CSS Pulsante 3

<br /> /* ----- FINE Pulsante 3 ------- */<br /> .btn-three {<br /> color: #FFF;<br /> transition: all 0.5s;<br /> position: relative;<br /> }<br /> .btn-three::before {<br /> content: '';<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: 100%;<br /> z-index: 1;<br /> background-color: rgba(255,255,255,0.1);<br /> transition: all 0.3s;<br /> }<br /> .btn-three:hover::before {<br /> opacity: 0 ;<br /> transform: scale(0.5,0.5);<br /> }<br /> .btn-three::after {<br /> content: '';<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: 100%;<br /> z-index: 1;<br /> opacity: 0;<br /> transition: all 0.3s;<br /> border: 1px solid rgba(255,255,255,0.5);<br /> transform: scale(1.2,1.2);<br /> }<br /> .btn-three:hover::after {<br /> opacity: 1;<br /> transform: scale(1,1);<br /> }<br /> /* ----- FINE Pulsante 3 ------- */<br />

---

Pulsanti 4 e 5: Il Gran Finale con Bordo Animato

Questi pulsanti, identificati dalle classi .animated-button e .animated-button1, sono un vero
spettacolo:

• Bordi in movimento:
  all’interno di ogni pulsante,
  quattro <span> agiscono come “bordi”
  animati. Ognuno di essi scorre lungo un lato diverso (alto, destro, basso e
  sinistro) grazie a specifiche keyframes (animateTop, animateRight, animateBottom, animateLeft).

• Effetto stratificato:
  un pseudo-elemento ::before sovrapposto fornisce una leggera variazione di opacità al passaggio
  del mouse, rendendo il tutto ancora più interattivo e vivace.

• Mix di colori:
  le varianti dei pulsanti differiscono
  nei colori, passando da toni scuri e misteriosi a palette più calde e
  vibranti, per adattarsi a diversi contesti e stili.

Pulsante 4

HTML Pulsante 4

<br /> <a href="#" class="animated-button"><br /> <span></span><br /> <span></span><br /> <span></span><br /> <span></span><br /> Button<br /> </a><br />

CSS Pulsante 4

<br /> /* ----- Pulsante 4 ------- */<br /> .animated-button {<br /> background: linear-gradient(-30deg, #0b1b3d 50%, #08142b 50%);<br /> padding: 20px 40px;<br /> margin: 12px;<br /> display: inline-block;<br /> -webkit-transform: translate(0%, 0%);<br /> transform: translate(0%, 0%);<br /> overflow: hidden;<br /> color: #d4e0f7;<br /> font-size: 20px;<br /> letter-spacing: 2.5px;<br /> text-align: center;<br /> text-transform: uppercase;<br /> text-decoration: none;<br /> -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);<br /> box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);<br /> }</p> <p>.animated-button::before {<br /> content: '';<br /> position: absolute;<br /> top: 0px;<br /> left: 0px;<br /> width: 100%;<br /> height: 100%;<br /> background-color: #8592ad;<br /> opacity: 0;<br /> -webkit-transition: .2s opacity ease-in-out;<br /> transition: .2s opacity ease-in-out;<br /> }</p> <p>.animated-button:hover::before {<br /> opacity: 0.2;<br /> }</p> <p>.animated-button span {<br /> position: absolute;<br /> }</p> <p>.animated-button span:nth-child(1) {<br /> top: 0px;<br /> left: 0px;<br /> width: 100%;<br /> height: 2px;<br /> background: -webkit-gradient(linear, right top, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));<br /> background: linear-gradient(to left, rgba(8, 20, 43, 0), #2662d9);<br /> -webkit-animation: 2s animateTop linear infinite;<br /> animation: 2s animateTop linear infinite;<br /> }</p> <p>@-webkit-keyframes animateTop {<br /> 0% {<br /> -webkit-transform: translateX(100%);<br /> transform: translateX(100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateX(-100%);<br /> transform: translateX(-100%);<br /> }<br /> }</p> <p>@keyframes animateTop {<br /> 0% {<br /> -webkit-transform: translateX(100%);<br /> transform: translateX(100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateX(-100%);<br /> transform: translateX(-100%);<br /> }<br /> }</p> <p>.animated-button span:nth-child(2) {<br /> top: 0px;<br /> right: 0px;<br /> height: 100%;<br /> width: 2px;<br /> background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));<br /> background: linear-gradient(to top, rgba(8, 20, 43, 0), #2662d9);<br /> -webkit-animation: 2s animateRight linear -1s infinite;<br /> animation: 2s animateRight linear -1s infinite;<br /> }</p> <p>@-webkit-keyframes animateRight {<br /> 0% {<br /> -webkit-transform: translateY(100%);<br /> transform: translateY(100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateY(-100%);<br /> transform: translateY(-100%);<br /> }<br /> }</p> <p>@keyframes animateRight {<br /> 0% {<br /> -webkit-transform: translateY(100%);<br /> transform: translateY(100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateY(-100%);<br /> transform: translateY(-100%);<br /> }<br /> }</p> <p>.animated-button span:nth-child(3) {<br /> bottom: 0px;<br /> left: 0px;<br /> width: 100%;<br /> height: 2px;<br /> background: -webkit-gradient(linear, left top, right top, from(rgba(8, 20, 43, 0)), to(#2662d9));<br /> background: linear-gradient(to right, rgba(8, 20, 43, 0), #2662d9);<br /> -webkit-animation: 2s animateBottom linear infinite;<br /> animation: 2s animateBottom linear infinite;<br /> }</p> <p>@-webkit-keyframes animateBottom {<br /> 0% {<br /> -webkit-transform: translateX(-100%);<br /> transform: translateX(-100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateX(100%);<br /> transform: translateX(100%);<br /> }<br /> }</p> <p>@keyframes animateBottom {<br /> 0% {<br /> -webkit-transform: translateX(-100%);<br /> transform: translateX(-100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateX(100%);<br /> transform: translateX(100%);<br /> }<br /> }</p> <p>.animated-button span:nth-child(4) {<br /> top: 0px;<br /> left: 0px;<br /> height: 100%;<br /> width: 2px;<br /> background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 20, 43, 0)), to(#2662d9));<br /> background: linear-gradient(to bottom, rgba(8, 20, 43, 0), #2662d9);<br /> -webkit-animation: 2s animateLeft linear -1s infinite;<br /> animation: 2s animateLeft linear -1s infinite;<br /> }</p> <p>@-webkit-keyframes animateLeft {<br /> 0% {<br /> -webkit-transform: translateY(-100%);<br /> transform: translateY(-100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateY(100%);<br /> transform: translateY(100%);<br /> }<br /> }</p> <p>@keyframes animateLeft {<br /> 0% {<br /> -webkit-transform: translateY(-100%);<br /> transform: translateY(-100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateY(100%);<br /> transform: translateY(100%);<br /> }<br /> }<br /> /* ----- FINE Pulsante 4 ------- */<br />

---

Pulsante 5

HTML Pulsante 5

<br /> <a href="#" class="animated-button1"><br /> <span></span><br /> <span></span><br /> <span></span><br /> <span></span><br /> Button<br /> </a><br />

CSS Pulsante 5

<br /> /* ----- Pulsante 5 ------- */<br /> .animated-button1 {<br /> background: linear-gradient(-30deg, #3d0b0b 50%, #2b0808 50%);<br /> padding: 20px 40px;<br /> margin: 12px;<br /> display: inline-block;<br /> -webkit-transform: translate(0%, 0%);<br /> transform: translate(0%, 0%);<br /> overflow: hidden;<br /> color: #f7d4d4;<br /> font-size: 20px;<br /> letter-spacing: 2.5px;<br /> text-align: center;<br /> text-transform: uppercase;<br /> text-decoration: none;<br /> -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);<br /> box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);<br /> }</p> <p>.animated-button1::before {<br /> content: '';<br /> position: absolute;<br /> top: 0px;<br /> left: 0px;<br /> width: 100%;<br /> height: 100%;<br /> background-color: #ad8585;<br /> opacity: 0;<br /> -webkit-transition: .2s opacity ease-in-out;<br /> transition: .2s opacity ease-in-out;<br /> }</p> <p>.animated-button1:hover::before {<br /> opacity: 0.2;<br /> }</p> <p>.animated-button1 span {<br /> position: absolute;<br /> }</p> <p>.animated-button1 span:nth-child(1) {<br /> top: 0px;<br /> left: 0px;<br /> width: 100%;<br /> height: 2px;<br /> background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));<br /> background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);<br /> -webkit-animation: 2s animateTop linear infinite;<br /> animation: 2s animateTop linear infinite;<br /> }</p> <p>@keyframes animateTop {<br /> 0% {<br /> -webkit-transform: translateX(100%);<br /> transform: translateX(100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateX(-100%);<br /> transform: translateX(-100%);<br /> }<br /> }</p> <p>.animated-button1 span:nth-child(2) {<br /> top: 0px;<br /> right: 0px;<br /> height: 100%;<br /> width: 2px;<br /> background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));<br /> background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);<br /> -webkit-animation: 2s animateRight linear -1s infinite;<br /> animation: 2s animateRight linear -1s infinite;<br /> }</p> <p>@keyframes animateRight {<br /> 0% {<br /> -webkit-transform: translateY(100%);<br /> transform: translateY(100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateY(-100%);<br /> transform: translateY(-100%);<br /> }<br /> }</p> <p>.animated-button1 span:nth-child(3) {<br /> bottom: 0px;<br /> left: 0px;<br /> width: 100%;<br /> height: 2px;<br /> background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));<br /> background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);<br /> -webkit-animation: 2s animateBottom linear infinite;<br /> animation: 2s animateBottom linear infinite;<br /> }</p> <p>@keyframes animateBottom {<br /> 0% {<br /> -webkit-transform: translateX(-100%);<br /> transform: translateX(-100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateX(100%);<br /> transform: translateX(100%);<br /> }<br /> }</p> <p>.animated-button1 span:nth-child(4) {<br /> top: 0px;<br /> left: 0px;<br /> height: 100%;<br /> width: 2px;<br /> background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));<br /> background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);<br /> -webkit-animation: 2s animateLeft linear -1s infinite;<br /> animation: 2s animateLeft linear -1s infinite;<br /> }</p> <p>@keyframes animateLeft {<br /> 0% {<br /> -webkit-transform: translateY(-100%);<br /> transform: translateY(-100%);<br /> }<br /> 100% {<br /> -webkit-transform: translateY(100%);<br /> transform: translateY(100%);<br /> }<br /> }<br /> /* ----- FINE Pulsante 5 ------- */<br />

---

In poche parole, questi codici sono un vero e proprio laboratorio di effetti
per pulsanti, dove ogni blocco di CSS gioca la sua parte per trasformare un
semplice clic in un’esperienza visiva divertente e coinvolgente. È come se
ogni pulsante avesse la sua personalità: pronta a dare quel tocco di magia che
rende il web design così intrigante.

Fonti, approfondimenti e risorse esterne:

• 65 Beautiful CSS Buttons

• 92 beautiful CSS Button Example

• 10 Best CSS button hover effects

• 190+ CSS Buttons