Namaskar dosto, Friends aaj me aapke sath 3d button ke html css coding share kar raha ho, friends aap ager apne website par 3d button ka use karna cahte hai to aap hamare website par last tak bane rahe aur is article ko last tak ka jarure padhe kyu ke is button ke coding se related kuch settings bhi aapke sath share ke gye hai,
Friends 3d button ke html css coding me humne gradient color coding ka use kiya hai aur ager aapko nahi patta gradient color coding kya hai to me aapko bata do, friends es code ka use ham tab he karte hai jab hame kise button ko 2 ya 2se jaada mix color dine ho, friends 3d button me hamne total 7 color ka use kiya hai jise aap apne hisab se set bhi kar sakte ho friends ager aapko coding ke jyada jaan kare nahi hai to aap hamare is article ko last tak ka jarure padhe isme me aapke sath is button ke coding ke jankare bhi share kar raha ho,
Contents
Friends 3d button ke html css code ko apke sath niche share kiya gaya hai jisko aap copy kar sakte ho aur uske baad apne blog post me use kar sakte ho,
<body>
<button class="Btc"><a href="https://www.viraltips.in/">Visit my website</a></button>
</body>
<style>
.Btc {
background: #000000;
background-image: -webkit-linear-gradient(top, #000000, #F70A0A);
background-image: -moz-linear-gradient(top, #000000, #F70A0A);
background-image: -ms-linear-gradient(top, #000000, #F70A0A);
background-image: -o-linear-gradient(top, #000000, #F70A0A);
background-image: linear-gradient(to bottom, #000000, #F70A0A);
-webkit-border-radius: -5px;
-moz-border-radius: -5px;
border-radius: -5px;
height: 0px;
line-height: 0px;
color: #FFFFFF;
font-family: serif;
width: 200px;
font-size: 22px;
font-weight: 100;
padding: 20px;
box-shadow: 0px 4px 0px 0px #000000;
-webkit-box-shadow: 0px 4px 0px 0px #000000;
-moz-box-shadow: 0px 4px 0px 0px #000000;
border: solid #0D772A 1px;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
.Btc:hover {
border: double #0CEAF5 4px;
background: #F7F41C;
background-image: -webkit-linear-gradient(top, #F7F41C, #330AF7);
background-image: -moz-linear-gradient(top, #F7F41C, #330AF7);
background-image: -ms-linear-gradient(top, #F7F41C, #330AF7);
background-image: -o-linear-gradient(top, #F7F41C, #330AF7);
background-image: linear-gradient(to bottom, #F7F41C, #330AF7);
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
text-decoration: none;
color: #000;
}
</style>
Friends is coding ko aap apne blog post blogger and wordpress website me use kar sakte hai, is button ke kafi simple coding ke gye hai,
Friends ager aap 3d button me apne text ko bada kar dite hai to aapko button me text ache se show nahi hoga is lye ager aap text ke size ko bada karte ho to aapko button ke size ko bhi badaa karna padinga,
Friends button ke size ko badaa karne ke lye aapko niche de gaye sabhi steps ko follow karna hai,
Step 1. Friends sabse pahle aapko apne button ke coding ko apne kise notepad me ya fir blogger ke new page me open kar le,
Step 2. Friends ab aapko 3d button ke html css coding me width: 200px ko search karna hai,
Step 3. Friends ab aapko jo iske Width 200 par milte hai aap usko apne text ke size ke hisab se kam ya jaada kar sakte ho,
Step 4. Friends iske baad aapko button ke settings ko save kar dina hai
Friends is pure process ko follow kar ke aap button ke size ko kam ya jaada kar sakte ho.
Note- Friends mujhi umeed hai aapko hamara aaj ka “3d button html css code free provide in hindi” article pasand aaya hoga aur ager aapko article acha lagga ho to aap hamare is post ko apne friends ke sath bhi jarure share kare, sath he ager aapko 3d button se related koi bhi problem aate hai to aap hame comments me puch sakte ho, Thanks all.
Read More Article: