छवि और पाठ के साथ एचटीएमएल हाइपरलिंक

Question

क्या हाइपरलिंक उस पर पाठ के साथ बटन की तरह दिखाना संभव है?

हम कोड के साथ हाइपरलिंक बटन बना सकते हैं:

<a href="..."> <img src="button.png" width="100" height="50" alt="Some text"></img> </a> 

लेकिन मैं भी बटन के मध्य में पाठ की जरूरत है।

धन्यवाद।

Answer 1

यह एक पृष्ठभूमि के रूप में बटन की स्थापना द्वारा संभव है:

<a href="..." style="text-align:center; background: url('button.png'); width: 100px; height: 50px;">Your text</a> 

लेकिन मैं पृष्ठभूमि छवियों के साथ बटन से बचने के लिए कोशिश करेगा (जब तक कि वे एक अजीब आकार थे)। इसके बजाय, मैं CSS3 का उपयोग करने की कोशिश करता हूँ।

Answer 2

मैं, सुझाव देंगे वास्तव में जानते हुए भी कि तुम क्या चाहते हैं, और यह सोचते हैं निम्नलिखित मार्क-अप के बिना:

<a href="#"><img src="path/to/image.png" /><span>Some text</span></a> 

a { 
    position: relative; 
    display: inline-block; 
} 

a span { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -1em; 
    margin-left: -50%; 
    width: 100%; 
    height: 2em; 
    color: #f90; 
    background-color: rgba(0,0,0,0.5); 
}​ 

JS Fiddle demo।

Answer 3

आप बूटस्ट्रैप या फ्लैट यूई जैसे कुछ यूआई ढांचे का उपयोग कर सकते हैं।

<a href="#" class="btn btn-primary"> Click Me</a>