Script tombol navigasi dengan menggunakan svg ringan seo friendy
klik untuk menyalin
👇
<div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:15px;">
<!-- Tombol Artikel -->
<a href="#artikel" style="
display:flex;
align-items:center;
justify-content:center;
gap:12px;
width:125px;
height:40px;
background:#fff;
color:#001b44;
text-decoration:none;
font-size:18px;
font-weight:700;
border:4px solid #001b44;
border-radius:14px;
box-shadow:0 8px 0 #001b44;
transition:.2s;
" onmousedown="this.style.transform='translateY(4px)';this.style.boxShadow='0 4px 0 #001b44';"
onmouseup="this.style.transform='translateY(0)';this.style.boxShadow='0 8px 0 #001b44';">
Artikel
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.75.75 0 0 1 .75-.75h10.69L8.22 3.03a.75.75 0 1 1 1.06-1.06l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06l4.22-4.22H1.75A.75.75 0 0 1 1 8z"/>
</svg>
</a>
<!-- Tombol Explore -->
<a href="/p/blogtool.html" style="
display:flex;
align-items:center;
justify-content:center;
gap:12px;
width:125px;
height:40px;
background:#8dff8d;
color:#001b44;
text-decoration:none;
font-size:18px;
font-weight:700;
border:4px solid #001b44;
border-radius:14px;
box-shadow:0 8px 0 #001b44;
transition:.2s;
" onmousedown="this.style.transform='translateY(4px)';this.style.boxShadow='0 4px 0 #001b44';"
onmouseup="this.style.transform='translateY(0)';this.style.boxShadow='0 8px 0 #001b44';">
Sitemap
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.75.75 0 0 1 .75-.75h10.69L8.22 3.03a.75.75 0 1 1 1.06-1.06l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06l4.22-4.22H1.75A.75.75 0 0 1 1 8z"/>
</svg>
</a>
</div>
<div style="display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:15px;">
<!-- Tombol Baca Artikel -->
<a href="#artikel"
style="display:flex;align-items:center;gap:8px;
padding:12px 22px;
border-radius:14px;
text-decoration:none;
font-weight:700;
font-size:15px;
color:#fff;
background:linear-gradient(135deg,#00c6ff,#0072ff);
box-shadow:0 6px 18px rgba(0,114,255,.35);
transition:.3s;
position:relative;
overflow:hidden;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 12l-4-4h3V0h2v8h3l-4 4z"/>
<path d="M2 14h12v2H2z"/>
</svg>
Baca Artikel
</a>
<!-- Tombol Blog Tool -->
<a href="/p/blogtool.html"
style="display:flex;align-items:center;gap:8px;
padding:12px 22px;
border-radius:14px;
text-decoration:none;
font-weight:700;
font-size:15px;
color:#fff;
background:linear-gradient(135deg,#ff512f,#dd2476);
box-shadow:0 6px 18px rgba(221,36,118,.35);
transition:.3s;
position:relative;
overflow:hidden;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-.95.95l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1c.418.123.744.45.95.95l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 .95-.95l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.95-.95l-.1-.34z"/>
<path d="M13 10h-2v2h2v-2zm-4 0H7v2h2v-2zm-4 0H3v2h2v-2z"/>
</svg>
Blog Tool
</a>
</div>
🕵️ Preview Code disana
👇
<div style="display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:15px;"> <!-- Tombol Baca Artikel --> <a href="#artikel" style="display:flex;align-items:center;gap:8px; padding:12px 22px; border-radius:14px; text-decoration:none; font-weight:700; font-size:15px; color:#fff; background:linear-gradient(135deg,#00c6ff,#0072ff); box-shadow:0 6px 18px rgba(0,114,255,.35); transition:.3s; position:relative; overflow:hidden;"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 12l-4-4h3V0h2v8h3l-4 4z"/> <path d="M2 14h12v2H2z"/> </svg> Baca Artikel </a> <!-- Tombol Blog Tool --> <a href="/p/blogtool.html" style="display:flex;align-items:center;gap:8px; padding:12px 22px; border-radius:14px; text-decoration:none; font-weight:700; font-size:15px; color:#fff; background:linear-gradient(135deg,#ff512f,#dd2476); box-shadow:0 6px 18px rgba(221,36,118,.35); transition:.3s; position:relative; overflow:hidden;"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"> <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-.95.95l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1c.418.123.744.45.95.95l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 .95-.95l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.95-.95l-.1-.34z"/> <path d="M13 10h-2v2h2v-2zm-4 0H7v2h2v-2zm-4 0H3v2h2v-2z"/> </svg> Blog Tool </a> </div>
👇
Komentar untuk Script tombol navigasi responsif ringan dan seo friendly
Posting Komentar