Subscribe Us

header ads

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

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

आज की पोस्ट में पेश है 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
"टिप्स हिन्दी में ब्लॉग" की हर नई जानकारी अपने मेल-बॉक्स में मुफ्त पाएं ! Save as PDF

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

4 टिप्पणियाँ

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

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

    जवाब देंहटाएं
  2. मित्र बहुत ही सुन्दर और रोचक जानकारी है मेरी ओर से ढेरों बधाई स्वीकारें

    जवाब देंहटाएं
  3. बहुत सुन्दर प्रस्तुति!
    आपकी इस प्रविष्टी की चर्चा कल रविवार (06-01-2013) के चर्चा मंच-1116 (जनवरी की ठण्ड) पर भी होगी!
    --
    कभी-कभी मैं सोचता हूँ कि चर्चा में स्थान पाने वाले ब्लॉगर्स को मैं सूचना क्यों भेजता हूँ कि उनकी प्रविष्टि की चर्चा चर्चा मंच पर है। लेकिन तभी अन्तर्मन से आवाज आती है कि मैं जो कुछ कर रहा हूँ वह सही कर रहा हूँ। क्योंकि इसका एक कारण तो यह है कि इससे लिंक सत्यापित हो जाते हैं और दूसरा कारण यह है कि किसी पत्रिका या साइट पर यदि किसी का लिंक लिया जाता है उसको सूचित करना व्यवस्थापक का कर्तव्य होता है।
    सादर...!
    नववर्ष की मंगलकामनाओं के साथ-
    सूचनार्थ!
    डॉ.रूपचन्द्र शास्त्री 'मयंक'

    जवाब देंहटाएं
  4. बहुत ही बढ़िया जानकारी,,, अच्छा लगा...आभार विनीत जी,,,

    recent post: वह सुनयना थी,

    जवाब देंहटाएं

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