Решение 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>