All geek questions in one place

CSS hexagonal button with rounded corners

I can create the same button with CSS. The main reasons are rounded corners. Rounded Triangle Please See My Code and Image Below

image

.lngbtn {
	position: relative;
	width: 150px;
	height: 50px;
	margin: 50px;
	color: #FFFFFF;
	background-color: #f4d046;
	text-align: center;
	line-height: 48px;
    padding: 16px;
	font-weight: bold;
}



.lngbtn:before {
    content:"";
    position: absolute;
    right: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:25px solid transparent;
    border-right:30px solid #f4d046;
    border-bottom:25px solid transparent;
}

.lngbtn:after {
    content:"";
    position: absolute;
    left: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:25px solid transparent;
    border-left:30px solid #f4d046;
    border-bottom:25px solid transparent;
}
<a href="#" class="lngbtn">Get to know us</a>
Run codeHide result
+4
source share
4 answers

I'm not saying that this cannot be achieved with CSS, but doing it with CSS would be a tedious job. SVG is always the recommended tool for creating complex forms like this (and this particular form is difficult to create even with SVG).

SVG:

  • scalable and therefore they help in a flexible design, the form can be stretched to fit the content
  • , (

SVG path , path, .

, path element d ( SVG - MDN):

  • M - , .
  • L - , , .
  • Q - , , Q. . .
  • z - , .

.hex {
  position: relative;
  height: 100px;
  min-width: 100px;
  padding: 12px 24px;
  margin: 4px;
  float: left;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  color: white;
}
.hex svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
path {
  fill: rgb(251, 208, 0);
}
.hex.border path {
  stroke: red;
  stroke-width: 4;
}
span {
  display: block;
  margin-top: 50px;
  padding: 8px;
  transform: translateY(-50%);
}
<div class='hex'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M27,7 
             L72,7  Q76,7 78,11 
             L95,46 Q97,50 95,54 
             L78,91 Q76,95 72,95
             L28,95 Q24,95 22,91
             L5,54  Q3,50 5,46
             L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some text</span>
</div>

<div class='hex'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M27,7 
             L72,7  Q76,7 78,11 
             L95,46 Q97,50 95,54 
             L78,91 Q76,95 72,95
             L28,95 Q24,95 22,91
             L5,54  Q3,50 5,46
             L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some lengthy text
  without line break.</span>
</div>

<div class='hex border'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M27,7 
             L72,7  Q76,7 78,11 
             L95,46 Q97,50 95,54 
             L78,91 Q76,95 72,95
             L28,95 Q24,95 22,91
             L5,54  Q3,50 5,46
             L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some very lengthy text</span>
</div>

<div class='hex border'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M27,7 
             L72,7  Q76,7 78,11 
             L95,46 Q97,50 95,54 
             L78,91 Q76,95 72,95
             L28,95 Q24,95 22,91
             L5,54  Q3,50 5,46
             L22,11 Q24,7 28,7z' vector-effect='non-scaling-stroke' />
  </svg>
  <span>Some very lengthy text
  <br>with line break.</span>
</div>
Hide result

, , ( ), path a ( SVG), , text, (, span). , , .

.hex {
  position: relative;
  height: 100px;
  min-width: 300px;
  padding: 12px 24px;
  margin: 4px;
  float: left;
}
.hex svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
path {
  fill: rgb(251, 208, 0);
}
text {
  font-family: Arial;
  font-weight: bold;
}
<div class='hex'>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <a xlink:href='#'>
      <path d='M52,7 
             L248,7  Q253,7 258,11 
             L295,46 Q297,50 295,54 
             L258,91 Q253,95 248,95
             L52,95 Q48,95 42,91
             L5,54  Q3,50 5,46
             L42,11 Q48,7 52,7z' vector-effect='non-scaling-stroke' />
      <text fill='white' text-anchor='middle' x='150' y='55'>Get to know us</text>
    </a>
  </svg>
</div>
Hide result

:

  • 100% , . .

  • stroke (border), , . , , stroke stroke-width CSS path.

  • , SVG-, , - . .

+8

.

.lngbtn {
	position: relative;
	width: 150px;
	height: 50px;
	margin: 50px;
	color: #FFFFFF;
	background-color: #f4d046;
	text-align: center;
	line-height: 48px;
    padding: 16px;
	font-weight: bold;
}



.lngbtn:before {
     content:"";
       transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg); 
    background-color: #f4d046;
    width:38px;
    height:39px;
    top: 5.3px;
    right: 85%;
    position:absolute;
    border-radius:6px;
    z-index:-1;
   }

.lngbtn:after {
       content:"";
       transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg); 
    background-color: #f4d046;
    width:38px;
    height:39px;
    top: 5.3px;
    left: 85%;
    position:absolute;
    border-radius:6px;
    z-index:-1;
}
<a href="#" class="lngbtn">Get to know us</a>
Hide result
+5

css

.button{
		position: relative;
		display:block;
		background: transparent;
		width:200px;
		height:60px;
		line-height:60px;
		text-align:center;
		font-size:15px;
		text-decoration:none;
		text-transform:uppercase;
		margin:40px auto;
	}

	.button:before, .button:after {
		width:200px;
		left: 0px;
		height:27px;
		z-index: -1;
		border-radius:5px;
		background:yellow;
	}

	/* Button Border Style */
	.violet:before,.violet:after {
		border: 3px solid yellow;
	}
	
	.button:before{
		position: absolute;
		content: '';
		border-bottom: none;
		-webkit-transform: perspective(15px) rotateX(5deg);
		-moz-transform: perspective(15px) rotateX(5deg);
		transform: perspective(15px) rotateX(5deg);  
	}

	.button:after{
		position: absolute;
		top: 32px;
		content: '';
		border-top: none;
		-webkit-transform: perspective(15px) rotateX(-5deg);
		-moz-transform: perspective(15px) rotateX(-5deg);
		transform: perspective(15px) rotateX(-5deg);
	}

	/* Just for presentation */
	body{
		position: absolute;
		height: 100%;
		width: 100%;
		background: #fff;
	}
<a href="#" class="button violet">get to know us!</a>
Hide result
+2

, before after 45 transform: rotate(45deg), . border-radius, . , . https://jsfiddle.net/93zbLqLy/

, 45 .

+1

Source: https://habr.com/ru/post/1668183/

More articles:


All Articles