如何添加鏈接到按鈕？

之前有人跳我。我是網絡管理員（CCNP）IA/CND（CISSP）類型。我聲明讓大家知道我來自哪裏。這可能是最簡單的問題，但是如何在下面列出的按鈕上添加一個onclick，並讓它去說... ancestry.com。我想我還會有其他按鈕去其他網站。建立我的第一個網站家庭聖誕禮物和學習，因爲我去。找到一個模板網站，並有一段時間。如何添加鏈接到按鈕？

/* Try This*/ 
 
$(".hover").mouseleave(
 
    function() { 
 
    $(this).removeClass("hover"); 
 
    } 
 
);

@import url(https://fonts.googleapis.com/css?family=Raleway:500); 
 
.snip1564 { 
 
    background-color: #ffffff; 
 
    border: none; 
 
    border-bottom: 6px solid #029ebe; 
 
    border-top: 6px solid #029ebe; 
 
    color: #555; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-family: 'Raleway', Arial, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
    height: 46px; 
 
    letter-spacing: 3px; 
 
    line-height: 34px; 
 
    margin: 15px 40px; 
 
    outline: none; 
 
    padding: 0 10px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
} 
 
.snip1564:before, 
 
.snip1564:after { 
 
    box-sizing: border-box; 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    background-color: #ffffff; 
 
    border-radius: 50%; 
 
    top: -6px; 
 
    content: ""; 
 
    height: 46px; 
 
    position: absolute; 
 
    width: 46px; 
 
    border: 6px solid #ddd; 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    z-index: -1; 
 
} 
 
.snip1564:before { 
 
    right: -23px; 
 
    border-left-color: #029ebe; 
 
    border-bottom-color: #029ebe; 
 
} 
 
.snip1564:after { 
 
    left: -23px; 
 
    border-right-color: #029ebe; 
 
    border-top-color: #029ebe; 
 
} 
 
.snip1564:hover, 
 
.snip1564.hover { 
 
    background-color: #ffffff; 
 
} 
 
.snip1564:hover:before, 
 
.snip1564.hover:before, 
 
.snip1564:hover:after, 
 
.snip1564.hover:after { 
 
    -webkit-transform: rotate(225deg); 
 
    transform: rotate(225deg); 
 
} 
 
/* Try This*/ 
 

 
body { 
 
    background-color: #212121; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
}

<button class="snip1564">ancestry.com</button> 
 
<button class="snip1564 hover">Facebook</button> 
 
<button class="snip1564">Youtube</button> 
 
<button class="snip1564">Send a happy Holidays greeting</button>

來源

2016-12-01 DIY-Rookie

你想用錨（鏈接）標籤，而不是按鈕。 'Text here' –

您正在使用jQuery語法，但沒有在您的示例中包含它或者用它來標記您的問題 – j08691

[這是一個簡單的鏈接示例。]（http://codepen.io/anon/pen/YpYrEK ） –

你可以這樣做兩種方式，使看起來像一個按鈕的超鏈接，或使一個按鈕W /改變了網頁上的點擊處理程序。

您將需要一些CSS定義如何按鈕的外觀，並將其分配給一類

<a href='http://www.ancestry.com' class='button'>Ancestry</a>

或

<button class="snip1564" onclick='window.location="http://www.ancestry.com"'> 
    ancestry.com 
</button>

編輯：這裏是一個小提琴https://jsfiddle.net/qa0kco9b/1/

來源

2016-12-01 19:55:56 imjosh

如何添加鏈接到按鈕？

回答

相關問題