Кнопка с 2 цветами в виде рамки

Question

Я пытаюсь создать кнопку, которая имеет два цвета в качестве рамки. Мне нужны два цвета: синий: # 00a7e1, оранжевый: # f6531d.

Я хотел бы просто использовать css, если это возможно.

Спасибо заранее!

ссылка на концепцию кнопки

Answer 1

Вы также можете играть с градиентом и background-clip (см. Комментарии в CSS)

button {
  vertical-align: top;
  border: 5px solid transparent;/* give extra space for gradients colors */
  font-size: 2.5rem;
  margin: 0.25em;
  padding: 0.5em 2em;
  background: linear-gradient(#333, #333),/* black turned into gradient to hold with background-clip and hide the 2 color gradient under it */
    linear-gradient(/* 2 colors to draw under the borders also via background-clip*/
        to bottom left,
        rgb(230, 83, 0) 50%,
        gray 51%,
        rgb(0, 166, 224) 40%
      )
      no-repeat center center;
  background-clip: 
    padding-box, /* drawn inside including padding area */
    border-box;/* drawn also under borders */
  background-size:
  100% 100%, 
  110% 150%;/* must be bigger than 100% so it include also borders, else it repeats */
  color: white;
  box-shadow: 0 0 2px 2px black, inset 0 0 2px black;/* did you want this too ? */
}

<button>BUTTON</button> <button> TO</button> <button> PLAY</button>

Если вы думаете, что это слишком много, у вас также есть border-image .

Answer 2

Просто используйте border-image с градиентом:

button {
  padding:20px;
  border:5px solid;
  border-image:linear-gradient(60deg,#00a7e1 50%,#f6531d 0) 20;
  background:transparent;
}

<button>some text</button>

Answer 3

Пример:

.btn
{
    border: 0;

    padding: 4px;
    display: inline-block;
    background: linear-gradient(20deg, #00a7e1 49%, #e65300 50%);
}
.bg
{
    background: #349645;
    padding: 8px 14px;
    font: bold 24px Consolas;
}
.btn:active .bg
{
    background: #0a1117;
    color: #ffffff;
}

<div class="btn"><div class="bg">YOU'R TITLE</div></div>
<button class="btn"><div class="bg">YOU'R TITLE</div></div>