如何添加链接到按钮？

之前有人跳我。我是网络管理员（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

如何添加链接到按钮？

回答

相关问题