Html button shape | Sololearn: Learn to code for FREE!

0

Html button shape

How can I do if I want to make a hexagon button?

1/23/2017 3:17:07 PM

Queven

5 Answers

New Answer

+3

<map name="shape"> <area shape="poly" coords="x0,y0,x1,y1,x2,y2,x3,y3..." href="url_to_open"> </map> <img usemap="#shape" src="image_url" alt=""> The <map> tag can handle multiple <area> shape tag... Not trying, but I guess you can avoid the href attribute and add a onclick event instead... Anyway, in place of url, you can at least set the attribute with an inlined script correctly prefixed: href="javascript:my_function(params);"

+1

@Tristian: Smart :) ( but verbose ;P You have duplicate the '.myhex:after' declaration ^^ )

+1

My quick solution for this ;) HTML <button class="myhex">CLICK</button> CSS .myhex { top: 40px; width: 100px; height: 55px; background-color: yellow; position: relative; border: none; letter-spacing: 0.1rem; font-weight: bold; } .myhex:before { content:""; position: absolute; top: -30px; height: 0; width: 0; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 30px solid yellow; } .myhex:after { content:""; position:absolute; top: 55px; height: 0; width: 0; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 30px solid yellow; }

0

Yes, thanks removed line, it was small window and didn't see all text ;( ,

0

I have written other solution using polygons ;) HTML <button class="hexagon"><span style="vertical-align: -12px;">TEXT</span></button> CSS .hexagon { margin: 0 auto; width:100px; height: 100px; border: none; -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: orange; color: white; letter-spacing: 0.1rem; } button.hexagon:hover { background-color: white; color: orange; border-left: 1px solid red; }