Button or link ?

I know habr is not for complaints,

but until

you will use
')
- links instead of buttons <UserName /> ‽

Author of the illustration <Marat Hilmanov> gray-monkey@yandex.ru

In short:

Use buttons for buttons, and links for links .

For buttons to use
links
- not comme il faut.

This is not a comprehensive guide to the buttons and is not an example of an incredible design, but only an attempt to show that there is a difference between the links and the buttons.

Who is this article for?

First of all, for the designer who makes the layout of the site, but does not draw the details inherent in the web. A peculiar attempt to explain that the web site lies outside the flat polygraphy.

Secondly, for the coder who came to the layout without states, so that was where the designer to send.

Thirdly, instead of another tirade about the difference in the buttons \ links and the need for state design, just give a link .

Content

• Links
  
  • Introduction
  • Antipattern
  • States
• Buttons
  
  • Availability
  • <form>
  • States
  • Display
  • CSS
    
    • Plain
    • Complicated
• To the designer
• thank
• GitHub Repository

Links

Introduction

 <a href="javascript:;">  </a> 

When you move the pointer to the link which is a button, then in the lower left corner appears javascript:;:

Or address with a grid:

on such a button and the context menu will kindly offer:

ctrl + click on this button will open a new tab on which will be exactly the page with which it was opened.

In addition, such a link with a grid as a link will become :visited , if it hasn’t already become, and will acquire the corresponding style. If the designer didn’t kill him, of course, in most cases it’s in vain, as discussed below.

In JavaScript scripts for such buttons, e.preventDefault() additionally used to prevent the default button action ( clicking on the link ) "is a crutch.

<a href="//link.url"></a>

• If a click leads to a change of address,
• This address can be copied
• send by email
• you can come back to it,
• this is not the address of the page itself
  - this is a link .

The link must have styles for the usual :active :visited :focus and :hover states.

Antipattern

 a { color: black !important; text-decoration: none !important; cursor: default !important; } 

Congratulations! With these styles, all your links will visually turn into plain text. Find them on the page will be extremely difficult.

And remember, if you put !important and do not really understand why you can not do without it, then read this word as an impotent . Perhaps you need to slightly change the selector in order to block the one that bothers you.

States

a - normal state

 a { color: #0645ad; cursor: pointer; text-decoration: none; } 

In the normal state, a must be blue or underlined, and preferably blue and underlined so that the user understands without a mouse over that this is a link . The user is accustomed to the fact that the blue words on the page are links , even if they are not underlined. If you don’t like the blue color for links , change it, but then underline the links .

a:hover - guidance

 a:hover { text-decoration: underline; } 

When the cursor is over a link , it becomes :hover and in this example takes on an underline. So the user will understand that this is exactly the link to which you can click.

a:focus - keyboard focus

 a:focus { text-decoration: underline; } 

When a link is set to a pointer moved by a tab tab
it becomes :focus . In 2016, this may seem strange, but there are people who work with sites through the keyboard. Some have a broken mouse. In any case, to nullify :focus state is a crime against such people.

Special special effects are not required to apply, enough such as in :focus .

CSS to not write twice:

 a:focus, a:hover { text-decoration: underline; } 

a:active - click

 a:active { color: #faa700; } 

Important state :active occurs when the user has already clicked on the link , but has not yet released the key. It helps the user to understand that his click has worked, and he does not need to click on it several times to go directly to the desired page.

a:visited - previously visited page

 a:visited { color: #0b0080; } 

You can see everything

:visited , will help the user not to forget which pages he has already opened and not to re-open them. So along with :active and :hover we will slightly unload the Internet from random downloads, and make it a little better and faster.

In the era of HTML4 , links underlined with a dotted line were used instead of buttons. This pattern is outdated.

The underline with a dotted line is recommended for tooltips during hover.
For example, in <abbr> such a selection will help to understand that you can hover and get a decryption.

An example of non-standard design of links:

The words in the link must obey the rules of the Russian language, caps are not allowed (exception - abbreviations)

HTML5 <button></button>

• If the click does not change the page address,
• the address cannot be copied
• And you can not share this address - this is a button .

The button allows caps, provided that you do not use abbreviations. Especially in non-obvious places.
If you have abbreviations, the upper case in the button is not desirable, select them in another way. Do not tempt users to tap on what does not tap. Touchscreen users have no opportunity to peep :hover or :focus state. Well, or there is, but it all happens is not very convenient, usually after the accomplished tapa.

Availability

<button /> may not be available on archaic browsers or devices. The buttons will not apply styles without special JavaScript scripts.
But you should not be bothered. On such devices often and JavaScript does not work. And maybe CSS.

In general, if you follow the ideology that everything that should be handled by JavaScript should be added by JavaScript, such a problem will not arise at all.

What is JSΩ , then JS ॐ! As the saying goes.

Behavior inside the form

<button> by default has a type=submit attribute even if it is not specified.

This attribute can also have reset values ​​for resetting the form.
and button to eliminate the effect on the form. Rules of good tone suggest
that everywhere you need to write <button type="button"></button> .

But in fact, you can limit yourself to a full entry only inside <form></form> ,
type=submit elsewhere does not affect anything.

This is by the way an excellent way to style the form submit button.
Unlike <input type="submit" value="" /> , in content
button you can write any HTML code, not just text.
for example

 <button> <img src="/images/icon.svg" title=" " alt="" /> <span style="color: red;"></span> <span style="color: blue;"></span> </button> 

This gives even more freedom in styling than <input type="image" />

States

Similar to the state of the links , except that the buttons have no state :visited , but there is a state :disabled .
Usually, the default design of the browser is cut out thoroughly, sometimes with neutralization of the display of states other than normal.
Yes. This guide is for you, a fan of turning a web page into a paper equivalent.

Styles for these things will need a little more, but it's not so scary. In addition, the guys from Twitter and partly Google have already taken care of the implementation of the bike.
Warm Lamp Bootstrap "and new-fashioned MaterializeCSS , for example.

Display

This is what a <button></button> looks like in my Chrome 54:

In the picture button , button:hover , button:focus , button:active respectively.

No frills. But given the movement of Google in the direction of Material Design , it may well be that in the near future they will be replaced by similar analogues .

CSS

For clarity - my version of the bike that looks weird, but for example, come down.

Normal, guidance, click, disabled respectively.

button - normal state

 button { background: none; outline: none; border: none; text-transform: uppercase; } 

button:hover , button:focus - when hovering

 button:hover, button:focus { color: hsla(108, 12%, 0%, 1); box-shadow: -1px 1px 2px hsla(108, 62%, 42%, 1); background-color: hsla(108, 62%, 92%, 1) } 

button:active - at the time of the click

 button:active { color: hsla(108, 42%, 32%, 1); box-shadow: -2px 4px 8px hsla(64, 64%, 42%, 1); background-color: hsla(64, 64%, 92%, 1); } 

button:disable - disabled

 button:disabled { color: hsla(0, 0%, 64%, 1); background: none; box-shadow: none; opacity: 1; } 

The example is more complicated

View live on JSFiddle

 button { margin: .8rem; font-size: 1.42rem; padding: 1rem; background: hsla(180, 90%, 64%, 1); color: hsla(180, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(180, 90%, 32%, 1); box-shadow: -4px 4px 0 0 hsla(180, 90%, 22%, .87), -3px 4px 3px hsla(180, 42%, 11%, 1), 1px 5px 4px hsla(180, 42%, 11%, 1), -4px 1px 0 0 hsla(180, 90%, 32%, 1), inset 0 0 1px 0 hsla(180, 90%, 90%, 1); border: 1px hsla(180, 92%, 56%, 1) solid; border-top-color: hsla(180, 92%, 64%, 1); border-radius: 5px; outline: none; position: relative; transition: all .22s ease-in; } button:hover { background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); border: 1px hsla(420, 92%, 56%, 1) solid; border-top-color: hsla(420, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(420, 90%, 22%, .87), -3px 4px 3px hsla(420, 42%, 11%, 1), 1px 5px 4px hsla(420, 42%, 11%, 1), -4px 1px 0 0 hsla(420, 90%, 32%, 1), inset 0 0 1px 0 hsla(420, 90%, 90%, 1); } button:focus { background: hsla(108, 90%, 42%, 1); color: hsla(108, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 90%, 32%, 1); border: 1px hsla(108, 92%, 56%, 1) solid; border-top-color: hsla(108, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(108, 90%, 22%, .87), -3px 4px 3px hsla(108, 42%, 11%, 1), 1px 5px 4px hsla(108, 42%, 11%, 1), -4px 1px 0 0 hsla(108, 90%, 32%, 1), inset 0 0 1px 0 hsla(108, 90%, 90%, 1); } button:active { background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 92%, 22%, 1) solid; border-top-color: hsla(420, 92%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 90%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 90%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 90%, 22%, 1); } button:disabled { background: hsla(420, 0%, 64%, 1); color: hsla(420, 0%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 0%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 0%, 22%, 1) solid; border-top-color: hsla(420, 0%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 0%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); } button:disabled.in_ajax { background: hsla(108, 22%, 64%, 1); color: hsla(108, 22%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 22%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(108, 22%, 22%, 1) solid; border-top-color: hsla(108, 22%, 56%, 1); box-shadow: 0 0 0 0 hsla(108, 22%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); } 

To the designer

You may not know TESES, but you must draw the states!

From the designer, in addition to the layout with the usual state of the link or button, it is required to attach various states in order not to arrange the bathert layout maker.
For example:

The guys from Google made this layout.

thank

Thank you for reading. Everything written here is not 100% ultimate truth.
Repository

Github

Link to the repository of this article . If you want to add or correct, please send a Pull Request