非div要素のグラデーションボーダーの作成

Question

ボーダー付きボタン（非div要素）があります。ボタンの境界線にグラデーションの色を付ける必要があります。

.uibutton, uibutton:focus { 
 
    width: 120px; 
 
    height: 27px; 
 
    color: #007AFF; 
 
    outline: none; 
 
    border-radius: 3px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: #007AFF; 
 
    background-color: transparent; 
 
} 
 
.uibutton:active { 
 
    width: 120px; 
 
    height: 27px; 
 
    color: #007AFF; 
 
    outline: none; 
 
    border-radius: 3px; 
 
    border-width: 2px; 
 
    border-style: solid; 
 
    background-color: transparent; 
 
} 
 
.uibutton:disabled { 
 
    width: 120px; 
 
    height: 27px; 
 
    color: #C7C7CC; 
 
    outline: none; 
 
    border-radius: 3px; 
 
    border-width: 1px; 
 
    border-color: #C7C7CC; 
 
    border-style: solid; 
 
    background-color: transparent; 
 
}

<button class="uibutton">Hello World</button> 
 
<button class="uibutton" disabled>Hello World</button>

私は、ボタンの境界にのみグラデーション必要があります。今、私のボタンは、（一般的にこれではそれがある）このようになります。 大変申し訳ありませんが、私は馬鹿です。ちょうど私のコードとその書き方を混乱させています。 忍耐力に感謝します。

Answer 1

上記のボタン使用コードにグラデーションの背景を追加するか、CSS Gradient Generatorを試してみてください。

.button { 
 
    width: 120px; 
 
    height: 27px; 
 
    outline: none; 
 
    border-radius: 3px; 
 
    box-sizing: border-box; 
 
    cursor: pointer; 
 
} 
 

 
.solid { 
 
    color: #fff; 
 
    border: none; 
 
    background: linear-gradient(150deg, #3acfd5 0%,#3a89d5 50%,#3a51d5 100%); 
 
} 
 

 
.thin { 
 
    border-left: none; 
 
    border-right: none; 
 
    border-top: 1px solid #1AD6FD; 
 
    border-bottom: 1px solid #1D62F0; 
 
    
 
    background-position: 0 0, 100% 0; 
 
    background-repeat: no-repeat; 
 
    background-size: 1px 100%; 
 
    
 
    background-color: transparent; /* removes button background */ 
 
    background-image: 
 
    linear-gradient(to bottom, #1AD6FD 0%, #1D62F0 100%), 
 
    linear-gradient(to bottom, #1AD6FD 0%, #1D62F0 100%); 
 
}

<button class="button solid">My button</button> 
 
<button class="button thin">My button</button>