Sliding border hover button html css coding free download

Namaskar dosto, Aaj me aapke sath ek new sliding border hover button html css coding ko share kar raha ho jise aap free download kar ke apne blog website me use kar sakte ho fir cahe vo blogger me ho ya wordpress me, friends aapko sliding border hover button bhote he jaada pasand aane vala hai, friends is hover button me hamne iske border ke oper work kiya hai aur sath he hamne isme gradient color ka use kiya hai jo is dekhne me kafi sunder hai,

Friends aap jab is button par apne mouse ka cursor lekar jaate ho to aapko ek to iska color change najar aayinga aur sath he aapko iske border slide karte najar aayige, Friends aapko ager isme kuch apne tarf se extra changing karne ho jaise ke aapko is hover button ka color change karna ho, iske size ko badhana ho, font size ko kam ya jaada karna ho to aap yai sab kar sakte ho aur button coding me kaise changing kar sakte ho yai sab aapko is post me details me bataya gaya hai to is post ko last tak ka jarure padhe,

Friends is article me aapko iske pure settings samjaye gaye hai aur sath he button ke coding bhi aapke sath share ke gye hai jisko aap free me download kar sakte hai,

Sliding border hover button html css coding free download

Friends sliding border hover button ke html css coding aapke sath niche share ke hai jise aap copy kar sakte ho aur isko apne blog post me use kar sakte ho, Friends aap is html css coding ko blogger and wordpress dono me use kar sakte ho,


<body>
<button class="btn info"><a href="https://www.viraltips.in/">Visit my website</a></button>
</body>
<head>

<style>

.btn{
  background: #353b48;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info{
  width: 180px;
  height: 40px;
  background: none;
  border: 5px solid;

  font-weight: 700;
  text-transform: uppercase;
background: linear-gradient(90deg, #000000, #01DF01, #FFFF00);
  cursor: pointer;
  font-size: 16px;
  position: relative;
}

.info::before,.btn::after{
  content: "";
  position: absolute;
  width: 14px;
  height: 4px;
  background: linear-gradient(90deg, #000000, #01DF01, #FFFF00);
  transform: skewX(50deg);
  transition: .6s linear;
}

.info::before{
  top: -4px;
  left: 10%;
}

.info::after{

  bottom: -4px;
  right: 10%;
}

.info:hover::before{

  left: 85%;
 <link rel="stylesheet" href="style.css">
}

.info:hover::after{

  right: 80%;
}
</style>
border sliding button.txt
Displaying border sliding button.txt.

Sliding border hover button me url link and text kaise change kare

Friends hover button me url link and text change karne ke lye aapko niche diye sabhi step ko follow karna hai,

Step 1. Friends button ke html coding me changing ke lye aapko apne coding ko notepad me ya fir aap blogger me ek new post create kar ke us me open kar sakte ho,

Step 2. Iske baad aapko apne html code me text change karne ke lye Visit my website ko search karna hai or uske jagha par aap jo bhi text button me show karna cahte ho vo type kar sakte ho,

Sliding border hover button me url link and text kaise change kare
Sliding border hover button me url link and text kaise change kare

Step 3. Friends url link change karne ke lye aapko coding me https://www.viraltips.in/ es url link ko search karna hai or isko hata kar aapko apna url link paste kar dina hai,

Friends es pure process ko follow kar ke aasane se aap is hover button me text or url link ko change kar sakte ho.

Sliding border hover button change background color-

Friends sabse pahle to me aapko yai bata do ke hamne hover button ke color coding me gardient color codes ka use kiya hai aur background me aapko total 3 color show hoge jin sabhi ko aap one by one change kar sakte ho, Friends hover button ka background color change karne ke lye aapko in sabhi steps ko follow karna hai,

Step 1. Friends sabse pahle aapko Sliding border hover button ke html css coding ko open karna hai,

Step 2. Friends ab aapko button ke coding me background: linear-gradient(90deg, #000000, #01DF01, #FFFF00); is code ko search karna hai,

Step 3. Friends aapko button me jis code ko search karna hai vo aapko button ke coding me 2 baar show hoga aapko first vaale code ko select karna hai,

Step 4. Friends ab aapko button ke background code me 3 color code show hoge jinko aap kise aur color code se replace kar sakte ho,

Sliding border hover button change background color
Sliding border hover button change background color

Step 5. Friends in Color code ko hata kar aap jo bhi bhi color button me lagana cahte ho un color codes ko aapko iske coding me add kar dinaa hai,

Friends is process se aapke Sliding border hover button ka background color change ho jayinga.

Read more article:

Sliding border hover button change text width size-

Friends ager aap apne button ke text ko bada karte ho to us condition me aapko button ke size ko bhi badaa karna hoga nahi to aapka text button me nahi aayinga, Friends button ke size ko badhane ke lya aapko button me Width: 180px; code ko search karna hai aur is code me hamne button ke width ko 180 par he rakha hai ab aap button ke text size ko apne post ke content ke hisab se change kar sakte hai,

Sliding border hover button change text size
Sliding border hover button change text size

Sliding border hover button ke font size kaise change kare-

Sliding border hover button ke font size kaise change kare
Sliding border hover button ke font size kaise change kare

Friends Sliding border hover button me font size ko kam ya jaada karne ke lye aapko button ke coding me font-size: 16px; code ko search karna hai aur aapko iske coding me font ke size 16 px milte hai jisko aap apne hisab se change kar sakte ho,

Sliding border hover button coding ko blogger post me kaise add kare

Friends hover button ke coding ko aap apne kise bhi blog post me add kar sakte ho aur ager aapko nahi patta ke kise tarha se coding ko aap apne blog post me add kar sakte ho to niche diye video ko watch kare, isme button ke pure setting ke baare me bataya gaya hai,

Important- Friends ager aapko is html css coding ko apne blogger aur wordpress me add karne me koi bhi problem aa rahe hai to aap hame comments me batta sakte ho taaki me aapko next post me isko solution share kar sako.

Sliding border hover button information video

Note- Friends aapko Sliding border hover button ka article kaisa laga home comments me jarure bataye aur is se related koi bhi sawal ho to aap hame comments me puch sakte ho aur sath he is article ko apne friends ke sath bhi jarure share kare, Thanks all.

2Shares

Leave a Comment

error: Content is protected !!