buttons shapes

[winning]

I am working on a website and would like to have my main headings (buttons) to be diamond shaped then with writing in it, but I am stuck. i do not know how to do this. I have come across a code generator but then don't know to actually apply it to my website. This is the site I used http://www.grsites.com/generate/generator/2003/and thenhttp://www.grsites.com/generate/viewresult/2/2000/2003/?result_id=14523040From that second link, you can see what I would like (the red diamond)I am wanting to know how to apply it to my website and it's codeThank you so much for your reply as soon as possible because I want to get this up and running as possible.regards

[Ingolme]

That site generates an image file for you, which you can put on your page using the HTML <img> element.

 

If you want a diamond-shaped button you need to create an image.

[winning]

Thanks for replying. I don't understand because I don't see any HTML <img> element on that site for me to put on my page in the first place.

 

OR How do I create the image?

Edited June 19, 2015 by winning

[Ingolme]

It says that "Only subscribed users may save the button." when you click "Generate" at the bottom of the page.

 

They're creating the image for you, but you have to make the <img> tag yourself and you have to upload the image to your web host.

 

Learn about HTML images here: http://www.w3schools.com/html/html_images.asp

[winning]

ok thanks for your help. I am going to try this. wish me luck hehe

[COBOLdinosaur]

That simple diamond effect does not need an image if you use CSS to create a square then just use transform:rotate(45deg) to turn it into a diamond.

 

Of course that will also rotate the text, so you might want to position the text, or put the text in a span and rotate it 315 degrees to bring it back up to alignment.

 

I have a bunch of stuff using rotate for effects on my personal site or if you want to play with shapes you will find several pieces about those as well.

[Ingolme]

I avoid the excessive use of CSS transforms in order to support older versions of Internet Explorer.

However, I wouldn't suggest having text as part of the image for a button, I would make a background image for the button and put real text inside the element instead. It is better for screen readers and search engines.

[dsonesuk]

I've seen this done with borders, then it would not be a problem for older IE versions.

[COBOLdinosaur]

If you just want to use the borders then you can do:

#diamond {   width: 0;   height: 0;   border: 50px solid transparent;   border-bottom-color: red;   position: relative; top: -50px;   } #diamond:after {   content: '';   position: absolute;   left: -50px;   top: 50px;   width: 0;   height: 0;   border: 50px solid transparent;   border-top-color: red;   }

There are a lot more shape options incase you want to explore additional shapes for most elements on my personal site.

 

Personally I prefer buttons with rounded sides, but I guess diamonsa are okay. With shaped bordersyou need to be careful about getting the padding right.

[dsonesuk]

IF nth-child is problem for older IE versions, use left, right and middle instead, transform sharpen the edge but! won't work for surprise surprise older version of IE so they will end up with pixelated edges, but the user decides to use one of the most behind the times CR@ppy browsers ever! that is their problem, not yours.

        <div class="diamond"><p><span class="left"></span><span class="middle">chat room</span><span class="right"></span></p></div>

            .diamond {                float: left;                margin: 10px;                position: relative;            }            /*.diamond span.left:after {*/            .diamond p span:nth-child(1) {                border-bottom: 11px solid  transparent;                border-right: 45px solid red;                border-top: 11px solid  transparent;                content: "";                left: -56%;                margin-top: -9px;                position: absolute;                top: 50%;                width: 50%;                z-index: 0;                -moz-transform: scale(.9999);                transform: scale(0.9999);            }            /*.diamond span.right:after{*/            .diamond p span:nth-child(3) {                border-bottom: 11px solid transparent;                border-left: 45px solid red;                border-top: 11px solid transparent;                content: "";                margin-top: -9px;                position: absolute;                right: -56%;                top: 50%;                width: 50%;                z-index: 0;                -moz-transform: scale(.9999);                transform: scale(0.9999);            }            /* .diamond .middle {*/            .diamond p span:nth-child(2) {                font-size: 1.1em;                font-weight: bold;                position: relative;                z-index: 10;            }