1

Как сделать кнопку, с градиентом для border, также border-radius: 50px, и внутри фон transparent?
Получилось сделать только чтобы фон внутри был заполнен белым цветом, не transparent.

.wrap{
  text-align:center;
  padding:50px;
}
.button {
    border-radius: 50px!important;
    background: linear-gradient(to right, #06b3e4, #0079c0)!important;
    overflow: hidden;
    padding: 1px;
  display:inline-block;
}
.button span {
    border-radius: 50px!important;
    background: #fff!important;
    border:none;
  padding: 10px 30px;
  display:inline-block;
}
<div class="wrap">
  <div class="button"><span>button</span></div>
</div>

https://jsfiddle.net/byj1fuze/

3 ответа 3

3

Можно сделать одним элементом + псевдоэлементом, используя градиент у рамок и обрезание переполнения (так можно сделать радиус у границы).

.gradient-button {
  box-sizing: border-box;
  width: 200px;
  height: 50px;
  background-color: transparent;
  position: relative;
  border-radius: 5px;
  border: none;
  overflow: hidden;
  font-size: 16px;
}

.gradient-button::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  border: 3px solid;
  border-image: linear-gradient(45deg, #39CCCC, #01FF70) 1;
  z-index: -1;
}

body {
  background-color: #fafafa;
}
<button class="gradient-button">some text</button>

3
  • а если ширина бордера 1px? скорее всего тут нужно svg растягивать по ширине кнопки jsfiddle.net/4cs6zL3m
    – word
    5 июн 2019 в 12:36
  • края должны быть круглые. Я так понял это нужно делать с помощью png?
    – word
    11 июн 2019 в 6:20
  • Если честно, мне не приходит в голову как можно сделать это элегантно. Могу только порекомендовать вам еще покопать в сторону border-image, граница может быть разбита на 9 кусков, 4 из которых могут быть скругленными — то, что нужно. 11 июн 2019 в 9:24
3

Решение SVG

Для решения использован линейный двухцветный градиент, который применен к прямоугольнику с закругленными углами.

Размеры прямоугольника регулируется изменением процентов, поэтому можно выставить любой необходимый размер. Текст находится внутри SVG, поэтому верстка никогда не сломается.
Приложение полностью адаптивно и работает во всех браузерах, включая IE

Если будет добавлена анимация градиента, то в IE она работать не будет.

  • Пример кода с двухцветным градиентом, как в вопросе:

.container {
  width: 25%;
  height: 25%;
}
.rect1 {
fill:transparent;
stroke-width:3;
stroke:url(#linearGradient);
}
.txt1 {
 font-size:16;
 fill:grey;
 text-anchor:middle;
}
<div class="container">
  <svg version="1.1" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="linearGradient" x1="0%" x2="100%" y1="0%" y2="0%" >
   <stop stop-color="#06B2E3" offset="0"/>   
   <stop stop-color="#3B9ACF" offset="0.9"/>
  </linearGradient>
 </defs>
 <g id="gr1">
  <rect class="rect1" x="5%" y="5%" width="80%" height="80%" rx="12%" />
   <text class="txt1" x="45%" y="60%"   >Button</text>
 </g>
</svg>
</div>

  • Более контрастная тема

.container {
  width: 35%;
  height: 35%;
  background-color:#474747;
}
.rect1 {
fill:transparent;
stroke-width:3;
stroke:url(#linearGradient);
}
.txt1 {
 font-size:16;
 fill:#32CD97;
 text-anchor:middle;
}
<div class="container">
  <svg version="1.1" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="linearGradient" x1="0%" x2="100%" y1="0%" y2="0%" >
   <stop stop-color="#06B2E3" offset="0.2"/>   
   <stop stop-color="#32CD97" offset="1"/>
  </linearGradient>
 </defs>
 <g id="gr1">
  <rect class="rect1" x="10%" y="16%" width="80%" height="80%" rx="12%" />
   <text class="txt1" x="50%" y="70%"   >Button</text>
 </g>
</svg>
</div>

Анимация градиента при наведении

Анимируется атрибут stop-color

.container {
  width: 35%;
  height: 35%;
  background-color:#474747;
}
.rect1 {
fill:transparent;
stroke-width:3;
stroke:url(#linearGradient);
}
.txt1 {
 font-size:16;
 fill:#32CD97;
 text-anchor:middle;
}
<div class="container">
  <svg version="1.1" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="linearGradient" x1="0%" x2="100%" y1="0%" y2="0%" >
   <stop stop-color="#06B2E3" offset="0">
   <animate
    attributeName="stop-color"
	dur="0.8s"
	values="#06B2E3;red"
	begin="gr1.mouseover"
	end="gr1.mouseout"
	repeatCount="1"  /> 
   </stop>
   <stop stop-color="#32CD97" offset="0.9">
    <animate
	 attributeName="stop-color"
	 dur="0.5s"
	 values="red;#06B2E3"
	 begin="gr1.mouseover"
	 end="gr1.mouseout"
	 repeatCount="1" /> 
   </stop>
   
  
  </linearGradient>
 </defs>
 <g id="gr1">
  <rect class="rect1" x="10%" y="15%" width="80%" height="80%" rx="12%" />
   <text class="txt1" x="50%" y="70%"   >Button</text>
 </g>
</svg>
</div>

Анимация stop offset

.container {
  width: 35%;
  height: 35%;
  background-color:#474747;
}
.rect1 {
fill:transparent;
stroke-width:3;
stroke:url(#linearGradient);
}
.txt1 {
 font-size:16;
 fill:orange;
 text-anchor:middle;
}
<div class="container">
  <svg version="1.1" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="linearGradient" x1="0%" x2="110%" y1="0%" y2="0%" >
   <stop offset="0" stop-color="orange" > 
	   <animate
		attributeName="offset"
		dur="0.8s"
		values="0;1"
		begin="gr1.mouseover"
		end="gr1.mouseout"
		repeatCount="1"
		fill="freeze" 	/>  
	   </stop>
     <stop offset="1" stop-color="dodgerblue" /> 
  </linearGradient>
 </defs>
 <g id="gr1">
  <rect class="rect1" x="10%" y="15%" width="80%" height="80%" rx="12%" />
   <text class="txt1" x="50%" y="70%"   >Button</text>
 </g>
</svg>
</div>

1

Ответ взят отсюда отчасти отсюда:

Примерно вот так:

    border-left: 5px solid #c13041;
    border-right: 5px solid #bd9600;
    background-image: linear-gradient(90deg, #c13041, #bd9600), linear-gradient(90deg, #c13041, #bd9600);
    background-size: 100% 5px;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;

.wrap{
  text-align:center;
  padding:50px;
}
.button {
    border-radius: 50px!important;
    border-left: 5px solid #c13041;
    border-right: 5px solid #bd9600;
    background-image: linear-gradient(90deg, #c13041, #bd9600), linear-gradient(90deg, #c13041, #bd9600);
    background-size: 100% 5px;
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 3px;
    display: block;
}
.button span {
  background: rgba(0,0,0,0)
  padding: 10px 30px;
  display:inline-block;
}
<div class="wrap">
  <div class="button"><span>button</span></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.