Documentation: implementing the style for the <kbd> tag to style documentation instructions that refer to buttons

[ogsamovar]

The <kbd> element (ref) allows us to implement a dedicated styling for tasks/procedure that describes how to accomplish a task by clicking a certain button.

The clarity and readability will improve if we style that part of the instructions in a distinctive way.

e.g. consider the text: Please note that you can always come back to edit your input before you click the SUBMIT button on the last step of the wizard.

Now it simply shows like this:

but it can be showed in a more distinct manner, like this:

if we style the <kbd> this way:

kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
   }

Alternatively, we can render the <kbd> to look this way:

if we style it this way:

kbd  {
    all: initial;
    outline: none;
    padding: 11px 13px;
    font-family: Inter;
    font-size: -2px;
    font-style: normal;
    font-weight: 700;
    line-height: 0px;
    letter-spacing: 0.6px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50px;
    cursor: pointer;
    background-color: rgba(0,0,0,0);
    transform: translateY(0);
    user-select: none;
    color: #f9f6f9;
    white-space: nowrap;
    gap: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: background .25s ease-in,transform .1s ease-in;
    border: none;
    background-image: linear-gradient(45deg, #a258a7 0%, #ff497a 50%, #8668fc 100%);
    background-size: 200% auto;
    color: #f9f6f9;
}

[dkent600]

I don't think we should make this look too much like a real live button. Having said that, it might be possible to create a real live button for these, for what it is worth. But not now, is too late. @BartuCulha @ogsamovar

[ogsamovar]

If you don't feel like mocking the real button we can keep it as a simple, more traditional <kbd> element by using these:

kbd {
    background-color: #eee;
    border-radius: 68px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    font-weight: 600;
    line-height: 1;
    padding: 2px 5px;
    white-space: nowrap;
}

[ogsamovar]

@dkent600 as per your request on Telegram

background-color: #F9F6F9; border: 1px solid #DCDAE5;

box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;

color: #15062d;

[BartuCulha]

Can we change the padding to this? .markdownContainer kbd { padding: 3px 5px 2px 5px; }

Currently: It seems like to font we are using has 1px gap at its bottom. Therefore this objects looks unaligned.

Expected: With the updated padding, it will look like this.

[dkent600]

done

[dkent600]

Hmm, actually didn't do. The given padding numbers did not do what was in the screenshot. I changed to 3px 6px;

[dkent600]

And then I changed to this: