具有漸變邊框的CSS按鈕

我想讓我的按鈕變成帶有漸變的銀色邊框的圖片。除了我被它困住的邊界之外，我做了所有的事情。下面是我當前的按鈕CSS。具有漸變邊框的CSS按鈕

.button_submit { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0cbbc8), color-stop(1, #008995)); 
    background:-moz-linear-gradient(top, #0cbbc8 5%, #008995 100%); 
    background:-webkit-linear-gradient(top, #0cbbc8 5%, #008995 100%); 
    background:-o-linear-gradient(top, #0cbbc8 5%, #008995 100%); 
    background:-ms-linear-gradient(top, #0cbbc8 5%, #008995 100%); 
    background:linear-gradient(to bottom, #0cbbc8 5%, #008995 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0cbbc8', endColorstr='#008995',GradientType=0); 
    background-color:#0cbbc8; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #ffffff; 
    display:inline-block; 
    cursor:pointer; 
    color:#ffffff; 
    font-family:Arial; 
    font-size:15px; 
    font-weight:bold; 
    padding:6px 24px; 
    text-decoration:none; 
} 
.button_submit:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #008995), color-stop(1, #0cbbc8)); 
    background:-moz-linear-gradient(top, #008995 5%, #0cbbc8 100%); 
    background:-webkit-linear-gradient(top, #008995 5%, #0cbbc8 100%); 
    background:-o-linear-gradient(top, #008995 5%, #0cbbc8 100%); 
    background:-ms-linear-gradient(top, #008995 5%, #0cbbc8 100%); 
    background:linear-gradient(to bottom, #008995 5%, #0cbbc8 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008995', endColorstr='#0cbbc8',GradientType=0); 
    background-color:#008995; 
} 
.button_submit:active { 
    position:relative; 
    top:1px; 
}

來源

2017-07-28 Iz Dev

可能的複製（https://stackoverflow.com/questions/2717127/css3-gradient-borders） –

@FredGandt我已經檢查之前...這真的不是我想要的。無論如何謝謝。 –

添加box-shadow得到它非常接近。你也可以使用:before psuedo-element來獲得白色背景。

我添加的關鍵部分是：

你可能要玩它，但希望它是一個開始。

.button_submit { 
 
    position: relative; 
 
    box-shadow: 0px 2px 5px -1px #333; 
 
    
 
    background:linear-gradient(to bottom, #0cbbc8 5%, #008995 100%); 
 
    background-color:#0cbbc8; 
 
    border-radius:6px; 
 
    border:1px solid #ffffff; 
 
    display:inline-block; 
 
    cursor:pointer; 
 
    color:#ffffff; 
 
    font-family:Arial; 
 
    font-size:15px; 
 
    font-weight:bold; 
 
    padding:6px 24px; 
 
    text-decoration:none; 
 
} 
 
.button_submit:hover { 
 
    background:linear-gradient(to bottom, #008995 5%, #0cbbc8 100%); 
 
    background-color:#008995; 
 
} 
 
.button_submit:active { 
 
    position:relative; 
 
    top:1px; 
 
}

<button class="button_submit"> 
 
Submit 
 
</button>

來源

2017-07-28 04:40:38 flygaio

我的第一個評論去了某處...無論如何謝謝....這就像我想要的一樣接近.... –

可以使保證金，並把另一分度相同的寬度和背景漸變裏面有對應的z-index。

來源

2017-07-28 05:35:15

.button_submit { 
 
    position: relative; 
 
    
 
    background:linear-gradient(to bottom, #0cbbc8 5%, #008995 100%); 
 
    background-color:#0cbbc8; 
 
    border-radius:6px; 
 
    border:1px solid linear-gradient(to bottom, #0cbbc8 5%, #008995 100%); 
 
    display:inline-block; 
 
    cursor:pointer; 
 
    color:#ffffff; 
 
    font-family:Arial; 
 
    font-size:15px; 
 
    font-weight:bold; 
 
    padding:6px 24px; 
 
    text-decoration:none; 
 
} 
 
.button_submit:hover { 
 
    background:linear-gradient(to bottom, #008995 5%, #0cbbc8 100%); 
 
    background-color:#008995; 
 
} 
 
.button_submit:active { 
 
    position:relative; 
 
    top:1px; 
 
}

<button class="button_submit"> 
 
Submit 
 
</button>

[CSS3漸變邊框]的

來源

2017-07-28 06:39:10

具有漸變邊框的CSS按鈕

回答

相關問題