Using a Button instead of href

This question already has an answer here:

  • How to create an HTML button that acts like a link? 27 answers

  • There are plenty of CSS button generators out there. Try this site : http://www.bestcssbuttongenerator.com/

    change the html to: ..

    See jsFiddle example

    <a href="http://www.yahoo.com" target="_blank" class='myButton'>Go to Yahoo</a>
    <a href="http://www.google.com" target="_blank" class='myButton'>Go to Google</a>
    <a href="http://www.msn.com" target="_blank" class='myButton'>Go to MSN</a>
    

    CSS:

    .myButton {
        -moz-box-shadow: 3px 4px 0px 0px #899599;
        -webkit-box-shadow: 3px 4px 0px 0px #899599;
        box-shadow: 3px 4px 0px 0px #899599;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
        background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
        background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba', GradientType=0);
        background-color:#ededed;
        -moz-border-radius:15px;
        -webkit-border-radius:15px;
        border-radius:15px;
        border:1px solid #d6bcd6;
        display:inline-block;
        cursor:pointer;
        color:#3a8a9e;
        font-family:Arial;
        font-size:17px;
        padding:7px 25px;
        text-decoration:none;
        text-shadow:0px 1px 0px #e1e2ed;
    }
    .myButton:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
        background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
        background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
        background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
        background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
        background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed', GradientType=0);
        background-color:#bab1ba;
    }
    .myButton:active {
        position:relative;
        top:1px;
    }
    
    链接地址: http://www.djcxy.com/p/36562.html

    上一篇: 如何写一个链接在HTML中的按钮?

    下一篇: 使用按钮而不是href