एचटीएमएल बटन "पुश" प्रभाव

Question

मैं यह नहीं समझ सकता कि एचटीएमएल बटन तत्व को धक्का दिया गया है (एचटीएमएल बटन पर राइट क्लिक करें और फिर मेरा मतलब क्या है) देखने के लिए चालू और बंद हो जाएं।

निम्नलिखित दो उदाहरण मैंने अन्य वेबसाइटों से लिया है। पहले में सामान्य बटन पुश प्रभाव होता है। दूसरा नहीं है।

.button { 
border:none 0; 
background-color:Transparent; } 
.button .l { background:url('img.gif') no-repeat 0 0; 
padding-left:7px; 
display:block; 
height:32px; } 
.button .c { background:url('img.gif') repeat-x 0 0; 
display:block; 
height:32px; 
padding-top:7px; } 
.button .r { 
background:url('img.gif') no-repeat right top; 
padding-right:7px; 
display:block; 
height:32px; } 

और

.button { 
background:#F0F0F0 url(img.gif) repeat-x scroll 0 0; 
border:1px solid Black; 
color:#333333; 
font-size:12px; 
height:20px; 
padding-left:8px; 
padding-right:8px; } 

संपादित करें: (। यानी पृष्ठभूमि छवि) @ श्री स्कीट, मैं एक बटन है कि सभी ब्राउज़रों में ही दिखाई देगा, लेकिन अभी भी धक्का के साथ एक वास्तविक एचटीएमएल बटन की तरह व्यवहार चाहते हैं प्रभाव। क्या मैं यह मानने में सही हूं कि इसके लिए मुझे जावास्क्रिप्ट की आवश्यकता होगी? और धक्का राज्य के लिए अलग सीएसएस? एक उदाहरण/ट्यूटोरियल भयानक होगा

Answer 1

या तो का उपयोग

<input type="button" value="Click Me"/> 

जो स्वत: एक बटन की तरह कार्य करेगा, या का उपयोग करें: जाएँ और: सक्रिय सीएसएस छद्म कक्षाएं आप क्या चाहते हैं पाने के लिए ...

a.likeAButton { 
    background-color:#67a0cf; 
    border:1px outset #2683cf; 
    color:#fff; 
    padding:3px 3px 3px 3px; 
    margin:1px; 
    text-decoration:none; 
} 
a.likeAButton:hover { 
    background-color:#5788af; 
    border:1px outset #2683cf; 
    color:#fcffdf; 
    padding:3px 3px 3px 3px; 
    margin:1px; 
    text-decoration:none; 
} 
a.likeAButton:active { 
    background-color:#67b4cf; 
    border:1px inset #1d659f; 
    color:#e0ffaf; 
    padding:4px 2px 2px 4px; 
    margin:1px; 
    text-decoration:none; 
} 


<a href="somepage.html" class="likeAButton">Fake Button</a> 

Answer 2

आप प्रत्येक तत्व जैसे कि। Likabutton, a.likeabutton: होवर और सभी के लिए सीमा त्रिज्या भी जोड़ सकते हैं। यह wil इसे एक अच्छा देखो दे। अगर हम इसे बटन की एक सूची की तरह बना सकते हैं तो इसमें बेहतर Navbar सुविधा होगी, मैंने कोशिश की, हालांकि, इन बटनों की स्थिति अधिकतम और पुनर्स्थापित borwser में समान नहीं है।