ボタンへのリンクをどのように追加しますか？

Question

誰かが私の上を飛ぶ前に。私はネットワーク管理者（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>

Answer 1

は、あなたはそれがボタンのように見えるハイパーリンクを作成する、またはページを変更するクリックハンドラ/ wのボタンを作り、2つの方法で行うことができます。

あなたはどのようにボタンの外観を定義し、クラスに

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

または

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

編集を割り当てるには、いくつかのCSSが必要になります。ここにあなたが使用したいフィドルhttps://jsfiddle.net/qa0kco9b/1/