× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

CSS3 hexagonal button with border and rounded corners

web-tiki
May 21, 2015
<h2>CSS :</h2> <p>You can achieve this shape with 2 3d transformed pseudo elements :</p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { display: inline-block; position: relative; padding: 20px 50px; perspective: 30px; } div:after,div:before { content: ''; position: absolute; top: 0; width: 100%; height: 100%; z-index: -1; background: orange; border: 2px solid darkorange; box-sizing: border-box; } div:before { right: 50%; transform-origin: 100% 0; transform: rotateY(-10deg); border-radius: 10px 0 0 10px; border-width: 3px 0 3px 5px; } div:after { left: 50%; transform-origin: 0 0; transform: rotateY(10deg); border-radius: 0 10px 10px 0; border-width: 3px 5px 3px 0; } body{text-align:center;}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;some text&lt;/div&gt;&lt;br/&gt;&lt;br/&gt; &lt;div&gt;some longer text&lt;/div&gt;</code></pre> </div> </div> <p></p> <p><em>Note that you will need to add the appropriate vendor prefixes to maximize browser support.</em></p> <hr> <h2>SVG :</h2> <p>Another alternative is to use an inline svg with the polygon element :</p> <p></p><div class="snippet"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div{ display:inline-block; position:relative; padding:20px 50px; } svg{ position:absolute; top:0; left:0; z-index:-1; min-width:100%; min-height:100%; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="btn"&gt; some text &lt;svg viewbox="0 0 100 30"&gt; &lt;polygon points="2 8 50 2 98 8 98 22 50 28 2 22" stroke-linejoin="round" stroke-width="2" stroke="darkorange" fill="orange" /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;div class="btn"&gt; some longer text &lt;svg viewbox="0 0 100 30"&gt; &lt;polygon points="2 8 50 2 98 8 98 22 50 28 2 22" stroke-linejoin="round" stroke-width="2" stroke="darkorange" fill="orange" /&gt; &lt;/svg&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/30257139/CSS3%20hexagonal%20button%20with%20border%20and%20rounded%20corners/30257476">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus