This is the 31st day of my participation in the August Text Challenge.More challenges in August

Hello everyone, I am a bowl of zhou, not you think of the “bowl of porridge”, is a front-end do not want to be drunk 👨🏻💻, if I write an article lucky can get your favor, very lucky ~

This is the 29th article in the “Learn From Scratch Front End” series, “Learning Pseudo-class Selectors about User Behavior with a Button.”

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

Writing in the front

This article will look at user behavior pseudo-class selectors. The main content of this article is shown below:

Button element

In HTML, the button element is usually referred to as the 

<button>This is a button</button>
Copy the code

The code looks like this:

The element also has a disabled attribute, which indicates whether the button is disabled. The disabled attribute is used as follows:

<button disabled>This is a disable button</button>
Copy the code

The code looks like this:

The function of the button in the front page is very powerful, it can be said that the button is everywhere, for example, we need to click the [register] button when registering, click the [login] button when logging in, and so on. The main function of a button is to help us do some kind of interaction.

Pseudo-class selectors that can be used in button elements

A button can use pseudo-class selectors such as :hover, :active, focus, etc. The following GIF shows the effects of hover and :active pseudo-class selectors :hover and :active

Among them, the state when the mouse is hovering is hover, and the state when the mouse is pressed to release is active. Now let’s walk through these pseudo-class selectors step by step.

: hover pseudo class

: Hover pseudo-class start time is the user hovering on an element, we can use :hover pseudo-class to modify the element show and hide, font or background color and other content, need to mention that the touch screen does not support :hover pseudo-class selector.

We can now use :hover to change the color of the text, as shown in the following example:

button {
    /* Unstyle the border */
    border: none;
}

button:hover {
    background-color: #66B1FF;
}
Copy the code

The code looks like this:

: active pseudo-classes

The :active pseudo class represents the time between the user pressing the key and releasing the key. It is generally used for, but not limited to, elements and

The following code shows the use of the active pseudo-class:

button {
    border: none;
}

button:active {
    background-color: #3A8EE6;
}
Copy the code

The code looks like this:

: hocus pseudo class

: Hocus pseudo-class is triggered after the focus is acquired. Hocus pseudo-class selector :hocus pseudo-class selector

button {
    border: none;
}

button:focus {
    background-color: #3A8EE6;
}
Copy the code

The code looks like this:

Only one element exists on a page for focus.

: disabled pseudo class

The :disabled pseudo-class indicates that the button is disabled. The :disabled pseudo-class is not only used by the button, but also has :disabled pseudo-class for .

The following code shows the usage of the disabled pseudo-class

button {
    border: none;
}

button:disabled {
    background-color: #A0CFFF;
    /* Change the hover state */
    cursor: no-drop;
}
Copy the code

The code looks like this:

Example: a simple button

Now we will use the above to make a simple button with the following example code:

button {
    border: none;
    color: #409eff;
    background: #ecf5ff;
    cursor: pointer;
    border: 1px solid #b3d8ff;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    padding: 12px 20px;
}

/* Hover :active :hover before active */
button:hover.button:focus {
    background: #409EFF;
    border-color: #409EFF;
    color: #fff;
}

button:active {
    background: #3a8ee6;
    border-color: #3a8ee6;
    color: #fff;
}

Copy the code

The code execution structure is as follows:

conclusion