<!-- BTN03 -->
<section style="display:grid;place-items:center;height:100vh;">
   <a class="btn03" href="/">
      <span class="btn03-content">
         <span class="btn03-label"><i>VOGLIO IL MIO SITO ORA</i></span>
         <span class="btn03-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none">
               <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
         </span>
      </span>
   </a>
</section>

<!-- BTN02 -->
<section style="display:grid;place-items:center;height:100vh;">
   <a class="btn02" href="/" aria-label="Scopri di più">
      <span class="btn02-content">
         <span class="btn02-sizer" aria-hidden="true">Scopri di più adesso</span>
         <span class="btn02-text btn02-text-first" aria-hidden="true">Scopri di più adesso</span>
         <span class="btn02-text btn02-text-second" aria-hidden="true"> Scopri di più adesso</span>
      </span>
   </a>
</section>

<!-- BTN01 -->
<section style="display:grid;place-items:center;height:100vh;">
   <a class="btn01" href="/">
      <span class="btn01-glow" aria-hidden="true"></span>
      <span class="btn01-content">
         <span class="btn01-label">SCOPRI ORA</span>
         <span class="btn01-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none">
               <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
         </span>
      </span>
   </a>
</section>

/* BTN03 */
.btn03{position:relative;isolation:isolate;display:inline-flex;min-height:58px;padding:1px;overflow:hidden;border-radius:50px;background:#00b1d5;background-size:220% 220%;
box-shadow: #0003 15px 28px 25px -18px;;color:#fff;font-family:Inter,system-ui,sans-serif;font-size:1rem;font-weight:900;letter-spacing:2px;text-decoration:none;transition:transform 220ms cubic-bezier(.2,.8,.2,1),box-shadow 220ms ease}
.btn03-content{position:relative;z-index:2;display:flex;width:100%;align-items:center;justify-content:center;gap:.85rem;padding:.9rem 2rem .9rem 2.35rem;border-radius:calc(18px - 1px);box-shadow: #0003 15px 28px 25px -18px;}
.btn03-label{white-space:nowrap}
.btn03-icon{display:grid;width:36px;height:36px;flex-shrink:0;place-items:center;box-shadow:inset 0 1px 0 #ffff 0 6px 14px #0000002e;transition:transform 220ms cubic-bezier(.2,.8,.2,1)}
.btn03-icon svg{width:18px;height:18px}
.btn03:hover{background-position:100% 50%;transform:translateY(-4px);box-shadow: #0000004d 2px 8px 8px -5px;filter:saturate(1.15)}
.btn03:hover .btn03-icon{transform:translateX(4px)}
.btn03:active{transform:translateY(-1px) scale(0.985);-webkit-box-shadow: 0px 5px 17px -4px rgba(0,0,0,0.42);box-shadow: 0px 5px 17px -4px rgba(0,0,0,0.42)}
.btn03:focus{outline:none}
.btn03:focus-visible{outline-offset:5px}
@media (max-width: 480px) {
.btn03{width:100%}
}

/* BTN02 */
.btn02{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:1px;border:2px solid #111;border-radius:999px;background-color:#111;color:#fff;font-family:Inter,system-ui,sans-serif;font-size:16px;font-weight:600;
   letter-spacing:5px;line-height:1;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden;transition:background-color .3s ease,color .3s ease,transform .3s ease}
.btn02:hover{background-color:#fff;color:#111;transform:translateY(-2px)}
.btn02:focus-visible{outline:3px solid #1111114d;outline-offset:4px}
.btn02-content{position:relative;z-index:2;display:grid;place-items:center;padding:.9rem 2rem .9rem 2.35rem}
.btn02-sizer{grid-area:1 / 1;display:block;visibility:hidden;pointer-events:none}
.btn02-text{grid-area:1 / 1;display:block;transition:transform .25s cubic-bezier(0.76,0,0.24,1)}
.btn02-text-first{transform:translateY(0)}
.btn02-text-second{transform:translateY(300%)}
.btn02:hover .btn02-text-first,.btn02:focus-visible .btn02-text-first{transform:translateY(-300%)}
.btn02:hover .btn02-text-second,.btn02:focus-visible .btn02-text-second{transform:translateY(0)}

/* BTN01 */
.btn01{position:relative;isolation:isolate;display:inline-flex;min-height:58px;padding:1px;overflow:hidden;border-radius:18px;background:linear-gradient(120deg,#7c3aed 0%,#4f46e5 35%,#2563eb 70%,#06b6d4 100%);background-size:220% 220%;-webkit-box-shadow: 0px 5px 17px -4px rgba(0,0,0,0.59); 
box-shadow: 0px 5px 17px -4px rgba(0,0,0,0.59);color:#fff;font-family:Inter,system-ui,sans-serif;font-size:1rem;font-weight:700;letter-spacing:5px;text-decoration:none;transition:transform 220ms cubic-bezier(.2,.8,.2,1),box-shadow 220ms ease,filter 220ms ease,background-position 500ms ease}
.btn01-content{position:relative;z-index:2;display:flex;width:100%;align-items:center;justify-content:center;gap:.85rem;padding:.9rem 2rem .9rem 2.35rem;border-radius:calc(18px - 1px);background:linear-gradient(135deg,#0f172ae0,#1e293bd1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffff inset 0 -1px 0 #ffffff0d}
.btn01-glow{position:absolute;z-index:1;inset:-80%;background:conic-gradient(from 180deg,transparent 0deg,#fff0 80deg,#ffffff80 120deg,transparent 160deg);opacity:0;transition:opacity 220ms ease,transform 700ms cubic-bezier(.2,.8,.2,1)}
.btn01-label{white-space:nowrap}
.btn01-icon{display:grid;width:36px;height:36px;flex-shrink:0;place-items:center;box-shadow:inset 0 1px 0 #ffff 0 6px 14px #0000002e;transition:transform 220ms cubic-bezier(.2,.8,.2,1)}
.btn01-icon svg{width:18px;height:18px}
.btn01:hover{background-position:100% 50%;transform:translateY(-4px);-webkit-box-shadow: 0px 5px 17px -4px rgba(0,0,0,0.42);box-shadow: 0px 5px 17px -4px rgba(0,0,0,0.42);filter:saturate(1.15)}
.btn01:hover .btn01-glow{opacity:1}
.btn01:hover .btn01-icon{transform:translateX(4px)}
.btn01:active{transform:translateY(-1px) scale(0.985);-webkit-box-shadow: 0px 5px 17px -4px rgba(0,0,0,0.42);box-shadow: 0px 5px 17px -4px rgba(0,0,0,0.42)}
.btn01:focus{outline:none}
.btn01:focus-visible{outline-offset:5px}
@media (max-width: 480px) {
.btn01{width:100%}
}