Can I make a short cut for a button?

Question

I have links on my web page that are called like this:

<a href="/xxx/"  >
  <button >xxx</button>
</a>

I have several like this and I would like to make it easy for a user to click them without the user having to go to the button and click. Is it possible for me to give the user a shortcut such as ALT M or something like that assigned to a button? Also can I make a button be the default if the user clicks enter?

score 1 · Accepted Answer · answered Jun 10 '11 at 11:39

1

You should use the accesskey property

<a href="/xxx/"  >
  <button accesskey="M" >xxx</button>
</a>

answered Jun 10 '11 at 11:39

Eineki

14,773
6
50
59

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

Give the element an "accesskey" using accesskey="1". When a user presses 1 that will activate the link.

EDIT

For a javascript (jQuery) solution see this SO post

edited May 23 '17 at 12:26

Community

1
1

answered Jun 10 '11 at 11:38

dotty

40,405
66
150
195

The user press 1 plus the appropriate key (alt/meta/ctrl) depending on browser and platform – Eineki Jun 10 '11 at 11:44
@Eineki: that's called a [modifier key](http://en.wikipedia.org/wiki/Modifier_key). – Marcel Jun 10 '11 at 11:46

score 0 · Answer 3 · edited Nov 05 '21 at 02:25

I would recommend styling a div to look like a button as they do for the tags here on stackoverflow.com as an example

<div class="post-taglist">
<a class="post-tag" rel="tag" title="" href="/questions/tagged/javascript">javascript</a>
<a class="post-tag" rel="tag" title="" href="/questions/tagged/html">html</a>
<a class="post-tag" rel="tag" title="" href="/questions/tagged/css">css</a>
</div>

CSS used by stackoverflow.com (needs a bit of work!)

.post-taglist {
    clear: both;
    margin-bottom: 10px;
}
.edit-tags-wrapper > a.post-tag {
    margin-right: 6px;
}
.post-tag, .post-text .post-tag, #wmd-preview a.post-tag {
    background-color: #E0EAF1;
    border-bottom: 1px solid #3E6D8E;
    border-right: 1px solid #7F9FB6;
    color: #3E6D8E;
    font-size: 90%;
    line-height: 2.4;
    margin: 2px 2px 2px 0;
    padding: 3px 4px;
    text-decoration: none;
    white-space: nowrap;
}
post-tag:hover, .post-text .post-tag:hover, #wmd-preview a.post-tag:hover {
    background-color: #3E6D8E;
    border-bottom: 1px solid #37607D;
    border-right: 1px solid #37607D;
    color: #E0EAF1;
    text-decoration: none;
}

Alternatively you can wrap your button in a form element like

<form method="post" action="nextPage.html"  >
<button>Press me</button>
</form>

How does this help with the answer to my question about access keys? I'm confused now. — Maricel, Jun 10 '11 at 12:05
Sorry mate, when I was typing my answer I lost track of that part... the access key can be assigned the same way as in Eineki's answer (obviously) sorry again for forgetting that part — Ryan, Jun 10 '11 at 12:30

Can I make a short cut for a button?

3 Answers3