CSS and markup for a balloon sample

Question

How can I create a "Contact Us" hyperlink as the one present on the top-right of this page?

I am particalarly interested on the balloon style.

Answer 1

Since that is static, I would just use an <img> for this.

Answer 2

They use simple html for the link and css to show rounded corners and an arrow.

<a href="/contact">Contact Us<span class="arrow"><span></span></span></a>

li.contactus a {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #EBE9D9;
border:1px solid #FFFFFF !important;
color:#4C4632 !important;
display:block;
float:left;
font-size:1.3em;
font-weight:bold;
line-height:1;
margin:0;
padding:0.4em 0.7em 0.6em 1.2em;
text-decoration:none;
text-shadow:1px 1px 0 #FFFFFF;
width:6em;
}

li.contactus a span.arrow {
border-left:0 none;
border-right:16px dashed transparent;
border-top:11px solid #FFFFFF;
bottom:-11px;
left:8px;
right:auto;
}

li.contactus a span span {
border-left:0 none;
border-right:14px dashed transparent;
border-top:10px solid #EBE9D9;
bottom:auto;
left:1px;
top:-12px;
}

li.contactus a span {
background:none repeat scroll 0 0 transparent;
border-bottom-width:0;
display:block;
height:0;
position:absolute;
width:0;
}

Answer 3

If you check the html and css in for that balloon you'll get your answer:

html:

<ul><li class="contactus"><a href="/contact">Contact Us<span class="arrow"><span></span></span></a></li></ul>

css:

li.contactus a span.arrow {
border-left:0 none;
border-right:16px dashed transparent;
border-top:11px solid #FFFFFF;
bottom:-11px;
left:8px;
right:auto;
}

li.contactus a span {
background:none repeat scroll 0 0 transparent;
border-bottom-width:0;
display:block;
height:0;
position:absolute;
width:0;
}

li.contactus, #home_nav li.contactus {
float:none;
font-size:1em !important;
margin:0;
overflow:visible !important;
padding:0;
position:absolute !important;
right:20px;
top:-0.5em;
width:10em;
z-index:99999;
}

li.contactus a {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #EBE9D9;
border:1px solid #FFFFFF !important;
color:#4C4632 !important;
display:block;
float:left;
font-size:1.3em;
font-weight:bold;
line-height:1;
margin:0;
padding:0.4em 0.7em 0.6em 1.2em;
text-decoration:none;
text-shadow:1px 1px 0 #FFFFFF;
width:6em;
}