-1

I'm wondering how sites such as Facebook, and TeamTreehouse make their navigation buttons custom shaped. Like this:

(From teamtreehouse.com) https://gyazo.com/47e09a6d70019b5b8d93549af20f1a9c, and this, (From facebook.com) https://gyazo.com/32de164e941c4f80355bd3d0b6045abe .

Can someone please explain to me how you make these custom shaped buttons? :) Thank you!

Note: Sorry for using links instead of images, don't have enough reputation...

CBroe
  • 91,630
  • 14
  • 92
  • 150
D. Stenson
  • 27
  • 1
  • 3
  • [Icons: How does a developer with no design skill make his/her application icons look pretty?](http://stackoverflow.com/questions/6729/icons-how-does-a-developer-with-no-design-skill-make-his-her-application-icons) – vaultah Sep 27 '15 at 14:10

2 Answers2

1

You don't have to use buttons for that. It can be a simple A tag and give the with, size and background using CSS. You can also give :hover status with this technique.

<a href="whatever.html" class="icon"></a>

<style type="text/css">
.icon{
    display:block;
    width:20px;
    height:20px;
    background-image:url(your-image.gif) bottom;
}

.icon:hover{
    background-position:top;
}
</style>
sebastianbarria
  • 86
  • 2
0

A simple quick tip is use bootstrap. And then customise. If you want to create your own button style from scratch use CSS properties like -moz-

Bishwas Mishra
  • 1,235
  • 1
  • 12
  • 25