"Untitled"
Bootstrap 4.1.1 Snippet by Manojkumar001

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jansons Carpets</title> <style> body { margin: 0; padding: 0; background: #eeeeee; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; } /* Card */ .card { background: #ffffff; padding: 40px 30px; max-width: 650px; border-radius: 20px; text-align: center; box-shadow: 0 15px 40px rgba(0,0,0,0.08); transition: 0.3s ease; } .card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(0,0,0,0.12); } h1 { font-size: 24px; color: #222; margin-bottom: 15px; } p { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 25px; } /* Short Button */ .btn { position: relative; display: inline-block; padding: 10px 20px; /* reduced */ background: linear-gradient(135deg, #008080, #00a6a6); color: #fff; text-decoration: none; border-radius: 25px; font-size: 14px; /* smaller text */ overflow: hidden; transition: all 0.3s ease; } /* Shine sweep */ .btn::before { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: rgba(255,255,255,0.3); transform: skewX(-25deg); transition: 0.5s; } .btn:hover::before { left: 130%; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,128,128,0.4); } /* Ripple */ .btn span { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,0.6); animation: ripple 0.6s linear; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } </style> </head> <body> <div class="card"> <h1>Jansons Carpets Provides Tribal Carpets in Delhi Inspired by Cultural Heritage</h1> <p> Jansons Carpets features tribal carpets in Delhi designed with bold patterns and authentic handcrafted techniques. These carpets bring artistic charm, warmth, and cultural richness to interiors. </p> <a href="https://jansonscarpets.com/tribal-carpets.html" class="btn" id="btn"> Explore </a> </div> <script> const btn = document.getElementById('btn'); btn.addEventListener('click', function(e) { const circle = document.createElement("span"); const diameter = Math.max(btn.clientWidth, btn.clientHeight); circle.style.width = circle.style.height = diameter + "px"; circle.style.left = e.clientX - btn.offsetLeft - diameter/2 + "px"; circle.style.top = e.clientY - btn.offsetTop - diameter/2 + "px"; btn.appendChild(circle); setTimeout(() => { circle.remove(); }, 600); }); </script> </body> </html>

Questions / Comments: