Hello. All day I hit this button. I tried to make a corner with the help of the border - the gradient does not work. I tried to turn the div at 45 degrees - the angle of the arrow turns out to be 90 degrees, and the angle in the picture is dull. I tried to draw on SVG - I do not know how to make round corners. Tell me how to do this?

If you have seen a similar button somewhere - share a link to a page.

  • habrahabr.ru/post/126207 - Denis Khvorostin
  • @DenisKhvorostin I saw this link. There all the figures are drawn using the border. You can not apply a gradient or border to them. - kvazarich

2 answers 2

*{ box-sizing: border-box; } .btn{ display: inline-block; padding: 16px 30px; color: #fff; border: 1px solid #4A803C; position: relative; border-radius: 3px; background: rgb(74,168,28); /* Old browsers */ background: -moz-linear-gradient(top, rgba(74,168,28,1) 0%, rgba(63,155,19,1) 100%, rgba(56,146,12,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(74,168,28,1) 0%,rgba(63,155,19,1) 100%,rgba(56,146,12,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(74,168,28,1) 0%,rgba(63,155,19,1) 100%,rgba(56,146,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4aa81c', endColorstr='#38920c',GradientType=0 ); } .btn > span{ position:relative; z-index: 1; } .btn:after { content: ""; width: 35px; height: 35px; display: block; position: absolute; top: 7px; right: -18px; border: 1px solid #4A803C; border-left: none; border-bottom: none; border-radius: 3px; -webkit-transform: rotateY(45deg) rotate(47deg) skew(5deg); transform: rotateY(45deg) rotate(47deg) skew(5deg); background-image: -moz-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%); background-image: -webkit-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%); background-image: -ms-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%); background-image: linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%); } .btn:hover{ background: rgb(56,146,12); /* Old browsers */ background: -moz-linear-gradient(top, rgba(56,146,12,1) 0%, rgba(63,155,19,1) 0%, rgba(74,168,28,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(56,146,12,1) 0%,rgba(63,155,19,1) 0%,rgba(74,168,28,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(56,146,12,1) 0%,rgba(63,155,19,1) 0%,rgba(74,168,28,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38920c', endColorstr='#4aa81c',GradientType=0 ); } .btn:hover:after{ background-image: -moz-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%); background-image: -webkit-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%); background-image: -ms-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%); background-image: linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%); } 
 <a href="#" class="btn"> <span>Умножитель матрицы</span> </a>

Feeddle

  • I already wrote similar code today too. The rightmost corner of the button is straight, and in the picture is stupid. And the corners in the picture are more rounded. border-radius: 5px does not solve anything - everything is spreading. (but so far this is the closest to the picture of what I went through in a day) - kvazarich
  • @kvazarich - made the corner more obtuse - soledar10
  • jsfiddle.net/soledar10/r2930cy2 - soledar10

Why not draw the button in the vector editor and not bring the SVG out of it? Hastily in Adobe Illustrator, rounding a curve - through Filter - Stylize - Round corners. And in a good way it should be done by arcs of circles, with proper adhesion to the pixel grid. Instead of Illustrator, Sketch or Fireworks is probably more suitable.

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve"> <g id="Layer_1"> <g> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="127.2778" y1="71" x2="127.2778" y2="111"> <stop offset="0" style="stop-color:#FFFFFF" /> <stop offset="1" style="stop-color:#000000" /> </linearGradient> <path fill="url(#SVGID_1_)" d="M212.053,109.3c-0.579,0.935-1.953,1.7-3.053,1.7H34c-1.1,0-2-0.9-2-2V73c0-1.1,0.9-2,2-2h175 c1.1,0,2.462,0.772,3.026,1.717l10.114,16.916c0.564,0.944,0.553,2.482-0.026,3.417L212.053,109.3z" /> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M212.053,109.55c-0.579,0.935-1.953,1.95-3.053,1.95H34 c-1.1,0-2.5-1.4-2.5-2.5V73c0-1.1,1.4-1.5,2.5-1.5h175c1.1,0,2.462,0.522,3.026,1.467l10.114,16.791 c0.564,0.944,0.553,2.544-0.026,3.479L212.053,109.55z" /> </g> </g> </svg>