How to make a slightly raised icon...

[glazedmacguffin]

Character Name

Character Name

Character Name

Instructions ►Copy and paste the code below. ►Replace ---URL OF PICTURE GOES HERE--- but be sure to leave the apostrophes on either side of it. ►Replace ---URL OF LINK--- and be sure the quotation marks stay. ►Replace ---CHARACTER NAME--- and be sure the quotation marks stay. ►Remember that anything between the <raw-code> and </raw-code> tags will need a <br> if you want to make a new line. So if you want to separate the character name (say, first name and then last name) you'll have put <br> between them. ►If you want to replace colors, you can do this in notepad. #668B8B #2F4F4F #ffffff (white) Table Code <raw-code><table style="font-family: arial; font-size: 8pt; color: #ffffff; border-radius: 60px; box-shadow: inset 7px 7px 11px 0px rgba(255, 255, 255, 0.50); background: linear-gradient(#668B8B, #2F4F4F); margin: 0px !important; text-align: center;"> <tr> <td style="padding: 10px; width: 150px; vertical-align: top;"> <center><div style="width: 100px; height: 100px; border-radius: 50px; box-shadow: inset 7px 7px 11px 0px rgba(255, 255, 255, 0.50); background: url('---URL OF PICTURE GOES HERE---') no-repeat; overflow: hidden; border: 3px solid #ffffff;"><a style="text-decoration: none" href="---URL OF LINK---"><table style="margin: 0px !important; width: 100px; height: 100px; border-radius: 50px; box-shadow: inset -8px -7px 11px 0px rgba(0, 0, 7, 0.52);"><tr><td></td></tr></table></a></div> ---CHARACTER NAME--- </td> <td style="padding: 10px; width: 150px; vertical-align: top;"> <center><div style="width: 100px; height: 100px; border-radius: 50px; box-shadow: inset 7px 7px 11px 0px rgba(255, 255, 255, 0.50); background: url('---URL OF PICTURE GOES HERE---') no-repeat; overflow: hidden; border: 3px solid #ffffff;"><a style="text-decoration: none" href="---URL OF LINK---"><table style="margin: 0px !important; width: 100px; height: 100px; border-radius: 50px; box-shadow: inset -8px -7px 11px 0px rgba(0, 0, 7, 0.52);"><tr><td></td></tr></table></a></div> ---CHARACTER NAME--- </td> <td style="padding: 10px; width: 150px; vertical-align: top;"> <center><div style="width: 100px; height: 100px; border-radius: 50px; box-shadow: inset 7px 7px 11px 0px rgba(255, 255, 255, 0.50); background: url('---URL OF PICTURE GOES HERE---') no-repeat; overflow: hidden; border: 3px solid #ffffff;"><a style="text-decoration: none" href="---URL OF LINK---"><table style="margin: 0px !important; width: 100px; height: 100px; border-radius: 50px; box-shadow: inset -8px -7px 11px 0px rgba(0, 0, 7, 0.52);"><tr><td></td></tr></table></a></div> ---CHARACTER NAME--- </td> </tr> </table></raw-code> Single Button <raw-code><table style="border-radius: 70px; box-shadow: inset 7px 7px 11px 0px rgba(255, 255, 255, 0.50); background: linear-gradient(#668B8B, #2F4F4F); margin: 0px !important; text-align: center;"> <tr> <td style="padding: 10px; vertical-align: top;"> <center><div style="width: 100px; height: 100px; border-radius: 50px; box-shadow: inset 7px 7px 11px 0px rgba(255, 255, 255, 0.50); background: url('http://www.dreamwidth.org/userpic/1058670/1152689') no-repeat; overflow: hidden; border: 3px solid #ffffff;"><a style="text-decoration: none" href="---URL OF LINK---"><table style="margin: 0px !important; width: 100px; height: 100px; border-radius: 50px; box-shadow: inset -8px -7px 11px 0px rgba(0, 0, 7, 0.52);"><tr><td></td></tr></table></a></div> </td> </tr> </table></raw-code>