How To Make Purchase Button

Helllo Guy's Today I will Show You How Make This Type Of  Button With HTML , CSS Very Easy To Make This Type Of  Button In Blogger And Wordpress In Your Site.

 

Purchase Now

With Help Of HTML And CSS

YouTube Subscribe Join Telegram

U Can Make This Button With The Help Of This Code Provide By Us Guy's

We Provide HTML And CSS Code Toy To Make This Purchase Button And Make Download Button . U can Make This Button With Mobile Also.

Benefits Of This Buttons ?

   This Type Looks Attractive And Catch The People On Your Website Very Easy And Your Earning Will Be Double . The longer your subscriber stays on your website, the more you will benefit, so wherever you put the link or put any material So you must add download And Purchase button.

But I will not give you any wrong code in any way, I am going to give you HTML code, you will find it in This website At Down Word, you can copy it

After copying, you have to paste it inside the notepad application in your mobile Ya Laptop , after that I have made a complete video on how to use that code, you can watch it by clicking on this link.

YouTube Video!

Even in this video, I have told you everything step by step that how you have to use the code which I am going to give you in the code, you have to paste that code somewhere.

<center> <div class="container"><div class="card"><div class="box"><div class="content"> <h3>Purchase Now</h3> <p>Product Detail</p> <a href="Payment Link Paste Here" target="_blank">BUY NOW</a> <a href="Coustmer Service Link" target="_blank">How To Talk</a> </div> <style> .container{display:flex;justify-content:center;align-items:center;max-width:1200px;flex-wrap:wrap;padding:40px 0}.container .card{position:relative;width:320px;height:440px;box-shadow:inset 5px 5px 5px rgba(0,0,0,0.05),inset -5px -5px 5px rgba(255,255,255,0.05),5px 5px 5px rgba(0,0,0,0.05),-5px -5px 5px rgba(255,255,255,0.05);border-radius:15px;margin:30px}.container .card .box{position:absolute;top:20px;left:20px;right:20px;bottom:20px;background:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.1);border-radius:15px;display:flex;justify-content:center;align-items:center;transition:0.5s}.container .card:hover .box{transform:translateY(-50px);box-shadow:0 10px 40px rgba(0,0,0,0.3);background:linear-gradient(45deg,#f747f2,#4f29cd)}.container .card .box .content{padding:20px;text-align:center}.container .card .box .content h2{position:absolute;top:-10px;right:30px;font-size:8em;color:rgba(0,0,0,0.02);transition:0.5s;pointer-events:none}.container .card:hover .box .content h2{color:rgba(0,0,0,0.05)}.container .card .box .content h3{color:#777;font-size:1.8em;z-index:1;transition:0.5s;pointer-events:none}.container .card .box .content p{font-size:1em;font-weight:300;color:#777;z-index:1;transition:0.5s;pointer-events:none}.container .card:hover .box .content h3,.container .card:hover .box .content p{color:#fff}.container .card .box .content a{position:relative;display:inline-block;padding:8px 20px;background:#03a9f4;margin-top:15px;border-radius:20px;color:#fff;text-decoration:none;font-weight:400;box-shadow:0 10px 20px rgba(0,0,0,0.2)}.container .card:hover .box .content a{background:#ff568f} </style></div></div></div> </center>

Wherever you have pasted your code, you will go there, you will get my link, after removing it, you have to enter your gender, whatever link you want to give.

You will get such a link, after removing this link, you will put whatever link you have, then whatever your subscriber will come, the link you will enter will go to that place .

Friends, by copying this code, you will get the code in this article.

You can easily learn and understand by watching the video I have made on this.

I will keep posting more important posts on my Website for all of you. Please give your support and love.

💕Thanks For Visiting Our Site💕

Have a nice day💖!