Sylish Push Type बटन अपने ब्लॉग पर कैसे स्थापित करें ?

tips hindi me शनिवार, जनवरी 05, 2013

आज की पोस्ट में पेश है stylish Push Type CSS आधारित बटन | इस प्रकार के बटन का निर्माण करना बहुत ही आसान है | आइये देखते हैं कि इन का निर्माण किस प्रकार किया जा सकता है |

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

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


<a class="push_button green" href="#" target="_blank"/>Tips Hini Mein
</a>

<a class="push_button red" href="#" target="_blank"/>Tips Hini Mein
</a>

<a class="push_button blue" href="#" target="_blank"/>Tips Hini Mein
</a>

<a class="push_button orange" href="#" target="_blank"/>Tips Hini Mein
</a>

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

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

इस प्रकार के लिए CSS कोड का निम्न अवलोकन कर सकते हैं


<style type="text/css">
.push_button {
    position: relative;
    width:200px;
    height:40px;
    text-align:center;
    color:#FFF;
    text-decoration:none;
    line-height:43px;
    font-family:'Oswald', Helvetica;
    display: block;
    margin: 30px;
}
.push_button:before {
    background:#f0f0f0;
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
    
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; 
    box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
    
    position: absolute;
    content: "";
    left: -6px; right: -6px;
    top: -6px; bottom: -10px;
    z-index: -1;
}

.push_button:active {
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .10) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
    top:5px;
}
.push_button:active:before{
    top: -11px;
    bottom: -5px;
    content: "";
}
.green {
    text-shadow:-1px -1px 0 #000;
    background: #228600;
    border:1px solid #224718;
 
 background-image:-webkit-linear-gradient(top, #224718, #228600);
    background-image:-moz-linear-gradient(top, #224718, #228600);
    background-image:-ms-linear-gradient(top, #224718, #228600);
    background-image:-o-linear-gradient(top, #224718, #228600);
    background-image:linear-gradient(to bottom, #224718, #228600);
 
 -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
 
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #224718, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #224718, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #224718, 0 4px 2px rgba(0, 0, 0, .5);
}

.green:hover {
    background: #228600;
    background-image:-webkit-linear-gradient(top, #228600, #224718);
    background-image:-moz-linear-gradient(top, #228600, #224718);
    background-image:-ms-linear-gradient(top, #228600, #224718);
    background-image:-o-linear-gradient(top, #228600, #224718);
    background-image:linear-gradient(top, #228600, #224718);
}

.red {
    text-shadow:-1px -1px 0 #A84155;
    background: #A20C1E;
    border:1px solid #DA0821;
 
 background-image:-webkit-linear-gradient(top, #E9001C, #A20C1E);
    background-image:-moz-linear-gradient(top, #E9001C, #A20C1E);
    background-image:-ms-linear-gradient(top, #E9001C, #A20C1E);
    background-image:-o-linear-gradient(top, #E9001C, #A20C1E);
    background-image:linear-gradient(to bottom, #E9001C, #A20C1E);
 
 -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
 
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AF3009, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AF3009, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AF3009, 0 4px 2px rgba(0, 0, 0, .5);
}

.red:hover {
    background: #A20C1E;
    background-image:-webkit-linear-gradient(top, #A20C1E, #E9001C);
    background-image:-moz-linear-gradient(top, #A20C1E, #E9001C);
    background-image:-ms-linear-gradient(top, #A20C1E, #E9001C);
    background-image:-o-linear-gradient(top, #A20C1E, #E9001C);
    background-image:linear-gradient(top, #A20C1E, #E9001C);
}

.blue {
    text-shadow:-1px -1px 0 #A84155;
    background: #069FCB;
    border:1px solid #01C6FF;
 
 background-image:-webkit-linear-gradient(top, #01C6FF, #037FA3);
    background-image:-moz-linear-gradient(top, #01C6FF, #037FA3);
    background-image:-ms-linear-gradient(top, #01C6FF, #037FA3);
    background-image:-o-linear-gradient(top, #01C6FF, #037FA3);
    background-image:linear-gradient(to bottom, #01C6FF, #037FA3);
 
 -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
 
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #056480, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #056480, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #056480, 0 4px 2px rgba(0, 0, 0, .5);
}

.blue:hover {
    background: #069FCB;
    background-image:-webkit-linear-gradient(top, #037FA3, #01C6FF);
    background-image:-moz-linear-gradient(top, #037FA3, #01C6FF);
    background-image:-ms-linear-gradient(top, #037FA3, #01C6FF);
    background-image:-o-linear-gradient(top, #037FA3, #01C6FF);
    background-image:linear-gradient(top, #037FA3, #01C6FF);
}
.orange {
    text-shadow:-1px -1px 0 #000;
    background: #E16C04;
    border:1px solid #FAA151;
 
 background-image:-webkit-linear-gradient(top, #FAA151, #E16C04);
    background-image:-moz-linear-gradient(top, #FAA151, #E16C04);
    background-image:-ms-linear-gradient(top, #FAA151, #E16C04);
    background-image:-o-linear-gradient(top, #FAA151, #E16C04);
    background-image:linear-gradient(to bottom, #FAA151, #E16C04);
 
 -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
 
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #E56D02, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #E56D02, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #E56D02, 0 4px 2px rgba(0, 0, 0, .5);
}

.orange:hover {
    background: #FAA151;
    background-image:-webkit-linear-gradient(top, #E16C04, #FAA151);
    background-image:-moz-linear-gradient(top, #E16C04, #FAA151);
    background-image:-ms-linear-gradient(top, #E16C04, #FAA151);
    background-image:-o-linear-gradient(top, #E16C04, #FAA151);
    background-image:linear-gradient(top, #E16C04, #FAA151);
}
</style>

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

Tips Hini Mein Download Subcribe	Tips Hini Mein Download Subcribe
Tips Hini Mein Download Subcribe	Tips Hini Mein Download Subcribe

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

एक टिप्पणी भेजें

4 टिप्पणियाँ

* Please Don't Spam Here. All the Comments are Reviewed by Admin.

बेनामीशनि जन॰ 05, 11:12:00 am 2013
[co="green"][si="4"]बहुत ही बढ़िया ट्रिक है, मैंने उपयोग करके देखा, अच्छा लगा... अब डाउनलोड, इंटर की फोटो लगाने की जरूरत नहीं रही इससे, काम की ट्रिक है मेरे लिए इसके लिए आपको थैंक्स.......[/si][/co]

[im]https://lh4.googleusercontent.com/-m1_Nj9MkkiQ/S-_1tnOG8sI/AAAAAAAAALo/0aNXEgr5LXQ/s337/thanks.jpg[/im]

जवाब देंहटाएं
उत्तर
अरुन अनन्तशनि जन॰ 05, 11:19:00 am 2013
मित्र बहुत ही सुन्दर और रोचक जानकारी है मेरी ओर से ढेरों बधाई स्वीकारें
जवाब देंहटाएं
उत्तर
डॉ. रूपचन्द्र शास्त्री 'मयंक'शनि जन॰ 05, 02:23:00 pm 2013
बहुत सुन्दर प्रस्तुति!
आपकी इस प्रविष्टी की चर्चा कल रविवार (06-01-2013) के चर्चा मंच-1116 (जनवरी की ठण्ड) पर भी होगी!
--
कभी-कभी मैं सोचता हूँ कि चर्चा में स्थान पाने वाले ब्लॉगर्स को मैं सूचना क्यों भेजता हूँ कि उनकी प्रविष्टि की चर्चा चर्चा मंच पर है। लेकिन तभी अन्तर्मन से आवाज आती है कि मैं जो कुछ कर रहा हूँ वह सही कर रहा हूँ। क्योंकि इसका एक कारण तो यह है कि इससे लिंक सत्यापित हो जाते हैं और दूसरा कारण यह है कि किसी पत्रिका या साइट पर यदि किसी का लिंक लिया जाता है उसको सूचित करना व्यवस्थापक का कर्तव्य होता है।
सादर...!
नववर्ष की मंगलकामनाओं के साथ-
सूचनार्थ!
डॉ.रूपचन्द्र शास्त्री 'मयंक'
जवाब देंहटाएं
उत्तर
धीरेन्द्र सिंह भदौरिया शनि जन॰ 05, 08:55:00 pm 2013
बहुत ही बढ़िया जानकारी,,, अच्छा लगा...आभार विनीत जी,,,

recent post: वह सुनयना थी,
जवाब देंहटाएं
उत्तर

टिप्पणी जोड़ें

आपकी टिप्पणी मेरे लिए मेरे लिए "अमोल" होंगी | आपके नकारत्मक व सकारत्मक विचारों का स्वागत किया जायेगा | अभद्र व बिना नाम वाली टिप्पणी को प्रकाशित नहीं किया जायेगा | इसके साथ ही किसी भी पोस्ट को बहस का विषय न बनाएं | बहस के लिए प्राप्त टिप्पणियाँ हटा दी जाएँगी |

Breaking Ticker

Sylish Push Type बटन अपने ब्लॉग पर कैसे स्थापित करें ?

एक टिप्पणी भेजें

Contact form