फैंसी एनीमेटिड बटन अपने ब्लॉग पर कैसे स्थापित करें ?

आज की पोस्ट में पेश है कूल फैंसी ऐनीमेटिड CSS आधारित बटन | इस प्रकार के बटन का निर्माण करना बहुत ही आसान है | आइये देखते हैं कि इन का निर्माण किस प्रकार किया जा सकता है | आप इस का लाइव डेमो इस लिंक पर देख सकते हैं |

HTML में class का महत्वपूर्ण योगदान है | इस प्रकार के बटन के लिए हम दो class का प्रयोग एक साथ करेंगे | बटन के लिए batan व बटन के रंग के लिए green व red

पहला कदम : HTML मोड में

<a href="#" class="button green">Button</a>
<a href="#" class="button red">Button</a>

उपरोक्त कोड लिखने के बाद बटन निम्न प्रकार से दिखाई देंगे

दूसरा कदम : CSS के बुनियादी स्टाइल

अब हम CSS कोड लिखेंगे जो हमें HTML मोड में दिखाई देता है | इस CSS कोड से बटन के स्टाइल व शेप batan class का प्रयोग करते हुए कैसे लिखा जाता है देख सकते हैं |

.button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 75px;
    margin: 0 20px;
    text-decoration: none;
}

निम्न कोड में बटन के रंग के लिए दो अलग-अलग रंग क्लास का कोड दिखाया गया है |

.green {
    border: solid 1px #3b7200;
    background-color: #88c72a;
}

.red {
    border: solid 1px #720000;
    background-color: #c72a2a;
}

उपरोक्त प्रयोग किये गये कोड का डेमो आप नीचे देख सकते हैं

तीसरा कदम : CSS3 स्टाइल

CSS3 स्टाइल सामान्य सीएसएस स्टाइल से ज्यादा उन्नत हैं | निम्न कोड में आप देख सकते हैं कि सामान्य CSS से उन्नत प्रॉपर्टीज का प्रयोग करके बटन के स्टाइल को और ज्यादा आकर्षक बनाया जा सकता है, जैसे के बटन के किनारों को गोल करना, छाया का इस्तेमाल करना इत्यादि इफेक्ट्स का प्रयोग किया जा सकता है | आप निम्न कोड में देख सकते हैं कि टेक्स्ट में छाया के लिए (नारंगी रंग में दिखाई दे रहा कोड) कौन सा कोड इस्तेमाल किया गया है |

.button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 75px;
    margin: 0 20px;
	text-shadow: 2px 2px 1px #595959;
    filter: dropshadow(color=#595959, offx=1, offy=1);
    text-decoration: none;
}

अलग प्रकार के बटन के शेप (Square, Rounded) के लिए अलग क्लास का प्रयोग किया जाता है | निम्न कोड में आप खुद देख सकते हैं |

.square {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.rounded {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

HTML में वो कोड कुछ इस प्रकार से दिखाई देगा |

<a href="#" class="button square green">Button</a>

<a href="#" class="button rounded red">Button</a>

डेमो निम्न प्रकार से दिखाई देगा |

उपरोक्त बटन में मैंने तीन क्लास का प्रयोग किया है "button" "square" "green"

अब हम अलग-अलग रंग के इन बटन में छाया का इस्तेमाल करेंगे | आप और रंग के बटन बनाने के लिए CSS कोड में बैकग्राउंड का रंग का कोड बदल कर नये बटन का निर्माण कर सकते हैं | आप निम्न में अवलोकन कर सकते हैं की छाया के लिए किस प्रकार से कोड लिखा जाता है ?

.green:hover {

    background-color: #7fb52f;

    background: -moz-linear-gradient(top, #7fb52f 0%, #67910b 100%);

    background: -webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%);

    background: -o-linear-gradient(top, #7fb52f 0%, #67910b 100%);

    background: -ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910b', endColorstr='#67910b',GradientType=0 );

    background: linear-gradient(top, #7fb52f 0% ,#67910b 100%);


}

.green:active {

    background-color: #638f22;

    background: -moz-linear-gradient(top, #638f22 0%, #486608 100%);

    background: -webkit-linear-gradient(top, #638f22 0%, #486608 100%);

    background: -o-linear-gradient(top, #638f22 0%, #486608 100%);

    background: -ms-linear-gradient(top, #638f22 0% ,#486608 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#486608', endColorstr='#486608',GradientType=0 );

    background: linear-gradient(top, #638f22 0% ,#486608 100%);

}

.red:hover {

    background-color: #b52f2f;

    background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);

    background: -webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);

    background: -o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);

    background: -ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 );
    background: linear-gradient(top, #b52f2f 0% ,#910b0b 100%);

}

.red:active {

    background-color: #8f2222;

    background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%);

    background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%);

    background: -o-linear-gradient(top, #8f2222 0%, #660808 100%);

    background: -ms-linear-gradient(top, #8f2222 0% ,#660808 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 );

    background: linear-gradient(top, #8f2222 0% ,#660808 100%);

}

आप नीचे इस प्रकार से कोड लिखने के बात बटन में हुए परिवर्तन को देख सकते हैं |

चौथा कदम : बटन Hover व Active State स्टाइल

Hover व Active state के लिए बटन को gradient लुक देने के लिए अलग-अलग क्लास के रंग परिवर्तन के लिए अलग-अलग रन कोड का इस्तेमाल करेंगे

.green:hover {
    background-color: #7fb52f;
    background: -moz-linear-gradient(top, #7fb52f 0%, #67910b 100%);
    background: -webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%);
    background: -o-linear-gradient(top, #7fb52f 0%, #67910b 100%);
    background: -ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910b', endColorstr='#67910b',GradientType=0 );
    background: linear-gradient(top, #7fb52f 0% ,#67910b 100%);
}

.green:active {
    background-color: #638f22;
    background: -moz-linear-gradient(top, #638f22 0%, #486608 100%);
    background: -webkit-linear-gradient(top, #638f22 0%, #486608 100%);
    background: -o-linear-gradient(top, #638f22 0%, #486608 100%);
    background: -ms-linear-gradient(top, #638f22 0% ,#486608 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#486608', endColorstr='#486608',GradientType=0 );
    background: linear-gradient(top, #638f22 0% ,#486608 100%);
}

.red:hover {
    background-color: #b52f2f;
    background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 );
    background: linear-gradient(top, #b52f2f 0% ,#910b0b 100%);
}

.red:active {
    background-color: #8f2222;
    background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -o-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -ms-linear-gradient(top, #8f2222 0% ,#660808 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 );
    background: linear-gradient(top, #8f2222 0% ,#660808 100%);
}

आप नीचे इस प्रकार से कोड लिखने के बाद बटन में हुए परिवर्तन को देख सकते हैं |

पांचवां कदम : एनीमेशन स्टाइल

अब वो आकर्षक व चलायमान कोड प्रस्तुत है जिससे हम ये तय करते हैं की बटन पर कौन से इफेक्ट का प्रयोग किया जाये जो एनीमेशन की झलक प्रस्तुत करे | निम्न कोड में शेप को अलग क्लास का प्रयोग कर के अलग-अलग प्रभाव के साथ ही Hover व Active State के लिए कोड दिखाया गया है |

.effect-2 {
    transition: border-radius 2s;
    -webkit-transition: border-radius 2s;
    -moz-transition: border-radius 2s;
    -o-transition: border-radius 2s;
    -ms-transition: border-radius 2s;
}

.effect-2:hover {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.effect-3 {
    transition: border-radius 1s;
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
}

.effect-3:hover {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

HTML में बटन के लिए कोड निम्न प्रकार से लिखेंगे |

Button
Button 

आप नीचे इस प्रकार से कोड लिखने के बात बटन में हुए परिवर्तन को देख सकते हैं |

लाइव डेमो आप इस लिंक पर देख सकते हैं |

अब यदि आप इस प्रकार के बटन का प्रयोग अपने ब्लॉग पर करना चाहते हैं तो सबसे पहले निम्न बटन पर क्लिक करके CSS कोड को अपने ब्लॉग पर स्थापित कर लें |

<style type="text/css"> /* button */ .button { font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #FFFFFF; padding: 10px 75px; margin: 0 20px; text-shadow: 2px 2px 1px #595959; filter: dropshadow(color=#595959, offx=1, offy=1); text-decoration: none; } /* button shapes */ .square { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .rounded { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .shape-1 { -webkit-border-radius: 5px 50px 5px 50px; border-radius: 5px 50px 5px 50px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 50px; -moz-border-radius-bottomleft: 50px; -moz-border-radius-bottomright: 5px; } .shape-2 { -webkit-border-radius: 50px 5px 50px 5px; border-radius: 50px 5px 50px 5px; -moz-border-radius-topleft: 50px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 50px; } /* button colors */ .blue { border: solid 1px #004F72; background-color: #3BA4C7; background: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); background: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); background: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%); background: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 ); background: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%); -webkit-box-shadow: 0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF; -moz-box-shadow: 0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF; box-shadow: 0px 0px 1px #00CCFF, inset 0px 0px 1px #FFFFFF; } .blue:hover { background-color: #1f97bf; background: -moz-linear-gradient(top, #1f97bf 0%, #0b7396 100%); background: -webkit-linear-gradient(top, #1f97bf 0%, #0b7396 100%); background: -o-linear-gradient(top, #1f97bf 0%, #0b7396 100%); background: -ms-linear-gradient(top, #1f97bf 0% ,#0b7396 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b7396', endColorstr='#0b7396',GradientType=0 ); background: linear-gradient(top, #1f97bf 0% ,#0b7396 100%); } .blue:active { background-color: #1b7694; background: -moz-linear-gradient(top, #1b7694 0%, #0d6380 100%); background: -webkit-linear-gradient(top, #1b7694 0%, #0d6380 100%); background: -o-linear-gradient(top, #1b7694 0%, #0d6380 100%); background: -ms-linear-gradient(top, #1b7694 0% ,#0d6380 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d6380', endColorstr='#0d6380',GradientType=0 ); background: linear-gradient(top, #1b7694 0% ,#0d6380 100%); } .green { border: solid 1px #3b7200; background-color: #88c72a; background: -moz-linear-gradient(top, #88c72a 0%, #709e0e 100%); background: -webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%); background: -o-linear-gradient(top, #88c72a 0%, #709e0e 100%); background: -ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e0e', endColorstr='#709e0e',GradientType=0 ); background: linear-gradient(top, #88c72a 0% ,#709e0e 100%); -webkit-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF; -moz-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF; box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF; } .green:hover { background-color: #7fb52f; background: -moz-linear-gradient(top, #7fb52f 0%, #67910b 100%); background: -webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%); background: -o-linear-gradient(top, #7fb52f 0%, #67910b 100%); background: -ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910b', endColorstr='#67910b',GradientType=0 ); background: linear-gradient(top, #7fb52f 0% ,#67910b 100%); } .green:active { background-color: #638f22; background: -moz-linear-gradient(top, #638f22 0%, #486608 100%); background: -webkit-linear-gradient(top, #638f22 0%, #486608 100%); background: -o-linear-gradient(top, #638f22 0%, #486608 100%); background: -ms-linear-gradient(top, #638f22 0% ,#486608 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#486608', endColorstr='#486608',GradientType=0 ); background: linear-gradient(top, #638f22 0% ,#486608 100%); } .red { border: solid 1px #720000; background-color: #c72a2a; background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%); background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%); background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%); background: -ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 ); background: linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%); -webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF; -moz-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF; box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF; } .red:hover { background-color: #b52f2f; background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%); background: -webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%); background: -o-linear-gradient(top, #b52f2f 0%, #910b0b 100%); background: -ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 ); background: linear-gradient(top, #b52f2f 0% ,#910b0b 100%); } .red:active { background-color: #8f2222; background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%); background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%); background: -o-linear-gradient(top, #8f2222 0%, #660808 100%); background: -ms-linear-gradient(top, #8f2222 0% ,#660808 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 ); background: linear-gradient(top, #8f2222 0% ,#660808 100%); } .gray { border: solid 1px #333333; background-color: #8f8f8f; background: -moz-linear-gradient(top, #8f8f8f 0%, #616161 100%); background: -webkit-linear-gradient(top, #8f8f8f 0%, #616161 100%); background: -o-linear-gradient(top, #8f8f8f 0%, #616161 100%); background: -ms-linear-gradient(top, #8f8f8f 0% ,#616161 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#616161',GradientType=0 ); background: linear-gradient(top, #8f8f8f 0% ,#616161 100%); -webkit-box-shadow: 0px 0px 1px #999999, inset 0px 0px 1px #FFFFFF; -moz-box-shadow: 0px 0px 1px #999999, inset 0px 0px 1px #FFFFFF; box-shadow: 0px 0px 1px #999999, inset 0px 0px 1px #FFFFFF; } .gray:hover { background-color: #808080; background: -moz-linear-gradient(top, #808080 0%, #545454 100%); background: -webkit-linear-gradient(top, #808080 0%, #545454 100%); background: -o-linear-gradient(top, #808080 0%, #545454 100%); background: -ms-linear-gradient(top, #808080 0% ,#545454 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#545454',GradientType=0 ); background: linear-gradient(top, #808080 0% ,#545454 100%); } .gray:active { background-color: #6b6b6b; background: -moz-linear-gradient(top, #6b6b6b 0%, #4a4a4a 100%); background: -webkit-linear-gradient(top, #6b6b6b 0%, #4a4a4a 100%); background: -o-linear-gradient(top, #6b6b6b 0%, #4a4a4a 100%); background: -ms-linear-gradient(top, #6b6b6b 0% ,#4a4a4a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a', endColorstr='#4a4a4a',GradientType=0 ); background: linear-gradient(top, #6b6b6b 0% ,#4a4a4a 100%); } /* button effects */ .effect-1 { transition: padding 1s; -webkit-transition: padding 1s; -moz-transition: padding 1s; -o-transition: padding 1s; -ms-transition: padding 1s; } .effect-1:hover { padding: 10px 200px; } .effect-2 { transition: border-radius 2s; -webkit-transition: border-radius 2s; -moz-transition: border-radius 2s; -o-transition: border-radius 2s; -ms-transition: border-radius 2s; } .effect-2:hover { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .effect-3 { transition: border-radius 1s; -webkit-transition: border-radius 1s; -moz-transition: border-radius 1s; -o-transition: border-radius 1s; -ms-transition: border-radius 1s; } .effect-3:hover { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .effect-4 { transition: border-radius 1s; -webkit-transition: border-radius 1s; -moz-transition: border-radius 1s; -o-transition: border-radius 1s; -ms-transition: border-radius 1s; } .effect-4:hover { border-radius: 50px 5px 50px 5px; -webkit-border-radius: 50px 5px 50px 5px; -moz-border-radius-topleft: 50px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 50px; } .effect-5 { transition: border-radius 1s; -webkit-transition: border-radius 1s; -moz-transition: border-radius 1s; -o-transition: border-radius 1s; -ms-transition: border-radius 1s; } .effect-5:hover { border-radius: 5px 50px 5px 50px; -webkit-border-radius: 5px 50px 5px 50px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 50px; -moz-border-radius-bottomleft: 50px; -moz-border-radius-bottomright: 5px; } </style>

अब जिस बटन का आप प्रयोग करना चाहते हैं उस कोड को आप अपनी पोस्ट के एडिट मोड में प्रयोग करें |

Buttonपहले बटन का कोड 
Button दूसरे बटन का कोड 
Buttonतीसरे बटन का कोड 
Button चौथे बटन का कोड 
Button पांचवें बटन का कोड 
Button छटे बटन का कोड 
Button सातवें बटन का कोड 
Button आठवें बटन का कोड 
Button नवें बटन का कोड 
Button दसवें बटन का कोड 
Button ग्यारवें बटन का कोड 
Buttonबाहरवें बटन का कोड 

क्या आपको फैंसी एनीमेटिड बटन को ब्लॉग पर स्थापित करने संबंधी लेख पसंद आया ? यदि हां !!! तो टिप्पणी अवश्य दें ताकि निरंतर लिखने की चाह बनी रहे |

"टिप्स हिन्दी में ब्लॉग" की हर नई जानकारी अपने मेल-बॉक्स में मुफ्त पाएं !