Category: Web Design

You have an image button and want to add a button press impression?

Simple! Trust me: most sites explain this too difficult

<style>
    button {
        border: none;
        background: none;
    }

    button:active {
        transform: translateY(2px);
    }
</style>

<button>
    <image src="button.png"></image>
</button>

This is a real time saver for you… well.. it took me some hours to get the whole thing done and tested.. few flags might be missing in the css code and a few have not been verified, but most countries are handled.
Enjoy!
(full source code at the end of the blog)

This time we start with the result: You want to have country flags displayed somewhere, say in a type-ahead (see this post)

That’s the HTML source code:
<TABLE>
          <TR>
               <TD><SPAN class=”FR”></SPAN</TD>
               <TD>FR</TD>
               <TD>FRANCE
                    <SPAN>some company info</SPAN>
               </TD>
          </TR>
</TABLE>

Here the file with flags from most countries in the world (you can download it)

here the css styles used to display the flags:

/* switzerland */
.CH{
 display: inline-block;
background-image:url(‘flags.png’);
background-position: -200px -89px;
width: 11px;
height: 11px;
}

/* germany */
.DE{
 display: inline-block;
background-image:url(‘flags.png’);
background-position: -284px -117px;
width: 16px;
height: 11px;
}

/* usa */
.US{
 display: inline-block;
background-image:url(‘flags.png’);
background-position: -4px -565px;
width: 16px;
height: 11px;
}

resources available here

the updated css fixes a minor bug when adjacent rows are higher than the flag and other flags would be “displayed”