Html button shape

Question

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

Answer 1

<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);"

Answer 2

@Tristian:

Smart :)

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

Answer 3

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;

}

Answer 4

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

Answer 5

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;

}