Home/ Questions/Q 7160265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T13:22:15+00:00

What is the best way to make buttons(javascript) like this and what is the

  • 0

What is the best way to make buttons(javascript) like this and what is the correct tag? “a”, “b” or any other tag ?

Example – http://jsfiddle.net/S7FPH/

or

<html>
<head>
<style type="text/css">
a.a_button, b.b_button {
    margin: 10px;
    background-color: green;
    width: 100px; height: 20px;
    text-align: center;
    display: block;
    color: yellow;
}
a.a_button {text-decoration: none;}

b.b_button{
    cursor: pointer;
    font-weight: 100;
}
</style>

<script type="text/javascript">
    function test(){
        alert("test");
    }
</script>
</head>
<body>

<a class="a_button" href="" onclick="test(); return false;">click</a>

<b class="b_button" onclick="test();">click</b>

</body>
</html>

UPDATE:

Thats how it should look
People asked it depends on how i want to use it, so here is an example.

about “button” tag – is thear is a way to make “button” tag look similar to my example(design) ?
about “ul” – i like it but i dunno how to position it this way.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Write Unobtrusive JavaScript and use:

    • A link (<a href="fallback">…</a>) if you can fall back to a regular link if the JS doesn’t work
    • A submit button (<input type="submit"> or <button type="submit">…</button>) if you can fall back to a form submission if the JS doesn’t work
    • A basic button inserted into the DOM with JavaScript (<input type="button"> or <button type="button">…</button>) if there is no sensible fall back available.

    Your simplified example is too far divorced from whatever your real use case is to tell which of the above applies in this care.

    Note that all of the above are focusable for free. Using elements that aren’t designed to be interacted with requires adding focusability using tabindex (which isn’t supported in some older browsers) and without focusability you can only interact with them using a pointing device (such as a mouse) and not with a linear input device (such as a keyboard).

    Don’t use a bold element. That would be nonsense.

    People asked it depends on how i want to use it, so here is an example.

    That can fall back to links simply enough. You should also make use of pushState so you don’t break bookmarking.

    about “button” tag – is thear is a way to make “button” tag look similar to my example(design) ?

    Just change the background-colours and border-styles.

    about “ul” – i like it but i dunno how to position it this way

    floats, or display: inline-block, combined with sensible margins and enough width to ensure that you get two items per line.

    • 0