0

I have to create a few buttons on my web page that open web pages outside my project.

Currently I use

*

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

*

These create a link instead of a button. Is there a way I can use a button ? I want the link to open in another tab/window instead of the same window.

CodeNinja
  • 3,188
  • 19
  • 69
  • 112
  • 2
    Use css to style them to look like buttons. –  Aug 26 '15 at 02:30
  • 1
    [How to create an HTML button that acts like a link?](http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link) – Han Aug 26 '15 at 02:39
  • Is there any problem to use a button like `` ? – J.C Aug 26 '15 at 02:43
  • @J.C. It's not an actual link, and `` elements belong into forms. – millimoose Aug 26 '15 at 02:50
  • I want to have the link opened in another tab not the same one – CodeNinja Aug 26 '15 at 02:50
  • @millimoose I think input without form is not a problem. http://stackoverflow.com/questions/3294572/is-input-well-formed-without-a-form But if OP want to keep a link (maybe for net spiders), is not a solution – J.C Aug 26 '15 at 03:04
  • @CodeNinja New tab? How about `window.open()`? http://stackoverflow.com/questions/19588708/how-to-use-both-onclick-and-target-blank – J.C Aug 26 '15 at 03:06
  • @J.C That's what he's using `target="_blank"` for, no need to involve JS for that. – millimoose Aug 28 '15 at 04:08

1 Answers1

1

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;
}