a href link that will act like a button

Question

Is there any clean method to make a regular link :

<a href="[8]">Click here to read more...</a>

to act EXACTLY like a button

<button id="[8]">Click here to read more...</button>

Thanks !

What do you mean 'act like a button'? What features do you want specifically? — Mussser, Jan 01 '14 at 23:58
Possible duplicate: http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link — Niels Sønderbæk, Jan 02 '14 at 00:02
Take a look at the articles on that website : http://puaction.com Now... The 'Click here to read more...' is a button that looks like a link. I want to remove all the css gimicks and get it back to regular link that will act like a button. — masteringprojects, Jan 02 '14 at 00:03
Niels Sønderbæk :: this is no duplicate I need the reverse method — masteringprojects, Jan 02 '14 at 00:04
Possible duplicate: http://stackoverflow.com/questions/2187008/styling-an-anchor-tag-to-look-like-a-submit-button?rq=1 CSS is going to be your only option as far as I'm aware — Ed W, Jan 02 '14 at 00:19
Have you considered just styling some text to look like a link and give it an onclick event? — Søren Ullidtz, Jun 16 '15 at 01:49

João Pinho · Accepted Answer · 2014-01-02T00:35:29.600

6

Do you mean something like this?

<a id="[8]" class="readmore" href="#">
    Click here to read more...
</a>

Adapting your javascript to the new "a":

$("a.readmore").click(function() { 
    var id=this.id.split('['); 
    var d_id=id[1].split(']'); 
    var ii=d_id[0] $('html, body').animate({ 
       scrollTop: $('[id='+ii+']').offset().top 
    }, 2000); 

    return false;
});

Just a tip, your string processing looks terrible, suggestion:

$("a.readmore").click(function() { 
    var id=this.id.match('[0-9]+');

    $('html, body').animate({ 
       scrollTop: $('[id='+ id +']').offset().top 
    }, 2000); 

    return false;
});

Ensure this code is being intercept by the page dom parser in the right time, put it inside a

$(document).ready(function(){ ... });

Regards.

edited Jan 02 '14 at 00:35

answered Jan 02 '14 at 00:04

João Pinho

3,725
1
19
29

no I want to completely remove the button. I make the button looks like a link via css but this is not a clean method. – masteringprojects Jan 02 '14 at 00:06
@masteringprojects can you use just an ?? – João Pinho Jan 02 '14 at 00:07
@masteringprojects what do you mean by "with act exactly"? If you add on click return false it will not follow the href link. Therefore, it will behave like a button, assuming you added the appropriate CSS styles. Although, why do you need this, is it somekind of hack over an existing system? – João Pinho Jan 02 '14 at 00:09
no I have a function that split the [{number}] from the and then it's open (slide to) article number 8 and so on... – masteringprojects Jan 02 '14 at 00:14
1

This is the function : $("button").click(function() { var id=this.id.split('['); var d_id=id[1].split(']') var ii=d_id[0] $('html, body').animate({ scrollTop: $('[id='+ii+']').offset().top }, 2000); }); – masteringprojects Jan 02 '14 at 00:17
@masteringprojects switch the button to link then, like it is in my answer you code will work, just change the $("button") to $("a"), maybe consider add a class to "a" so you can write something more precise like $("a.readmore"). – João Pinho Jan 02 '14 at 00:22
Yes it is working I have test in on jsfiddle working perfectly ! :) http://jsfiddle.net/neWuc/ Thanks to João Pinho! – masteringprojects Jan 02 '14 at 00:37
Thank you VERY MUCH João Pinho ! Sorry that I can't vote up ! :) – masteringprojects Jan 02 '14 at 00:41

score 0 · Answer 2 · edited Sep 21 '16 at 12:10

0

Yes that is good sir ! I hope this will satisfy your needs :).

<html>
<style>
    .lnkbtn{
        display: block;
        width: 100px;
        background-color: lightgrey;
        border: 1px solid black;
        text-align: center;
        text-decoration: none;
        padding: 5px 0px 5px 0px;
    }

    .lnkbtn:hover{
        background-color: #aaa;
    }

    .lnkbtn:visited{
        color: blue;
    }

    .lnkbtn:active{
        border: 1px solid red;
    }

</style>
<body>
    <a href = "http://www.google.com" class = "lnkbtn">Click me!</a>
</body>
</html>

edited Sep 21 '16 at 12:10

Community

1
1

answered Jan 02 '14 at 00:19

user3152069

408
3
9

That neither behaves nor looks like a button. – kba Jan 02 '14 at 00:20
No, This is definetly NOT what I'm looking. I don't need the link to looks like a button I need the link to behave like a button. – masteringprojects Jan 02 '14 at 00:21
Would you please describe "behave" ? What do you want an onclick event ? You could add an id to the link the and call it trough an external js file, like $("#btn").onclick = function(){ ... } – user3152069 Jan 02 '14 at 00:32

a href link that will act like a button

2 Answers2