WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
बटन होवर
661
ledoc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
13 July 2024
फायरफ्लाइज़ बटन
21 June 2024
स्व-विनाश बटन
3 March 2025
डाउनलोड बटन
HTML
Copy
<div id="outer"> <div class="button_slide slide_down">BUTTON: SLIDE DOWN </div> <br /> <br /><br /> <div class="button_slide slide_right">BUTTON: SLIDE RIGHT </div> <br /> <br /><br /> <div class="button_slide slide_left">BUTTON: SLIDE INSIDE </div> <br /> <br /><br /> <div class="button_slide slide_diagonal">BUTTON: SLIDE DIAGONAL </div> <br /> <br /><br /> </div>
CSS
Copy
height: 100%; } body { height: 100%; margin: 0; background: #162944; } .button_slide { color: #FFF; border: 2px solid rgb(216, 2, 134); border-radius: 0px; padding: 18px 36px; display: inline-block; font-family: "Lucida Console", Monaco, monospace; font-size: 14px; letter-spacing: 1px; cursor: pointer; box-shadow: inset 0 0 0 0 #D80286; -webkit-transition: ease-out 0.4s; -moz-transition: ease-out 0.4s; transition: ease-out 0.4s; } .slide_down:hover { box-shadow: inset 0 100px 0 0 #D80286; } .slide_right:hover { box-shadow: inset 400px 0 0 0 #D80286; } .slide_left:hover { box-shadow: inset 0 0 0 50px #D80286; } .slide_diagonal:hover { box-shadow: inset 400px 50px 0 0 #D80286; } #outer { width: 364px; margin: 50px auto 0 auto; text-align: center; }
JS
Copy
