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

Author: battleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if need to be reproduced can contact the author authorized

background

Buttons are one of the most frequently used interaction elements in programming, and clicking on them produces the action it describes. If a button says submit, clicking on it is likely to submit something. It is also one of the most important interaction elements in any digital product. At present, the mainstream button design is still flat, combined with color change, animation effect to achieve click feedback, but in terms of feedback, the author thinks three-dimensional 3D button combined with animation effect can better simulate the feeling of pressing buttons in reality, to achieve better feedback effect.

Excellent button features

  1. Outstanding featuresA button should look like a button so that the user knows its function at first glance
  2. The more similar the buttons are to our real buttons, the better. chooserectangular,The rounded rectanglealwaysThe safest option
  3. The up and down or soAlign center
  4. The internal spacing on the left and right sides is twice the vertical spacing, which is one for readabilitySafe proportional selection
  5. The mobile terminalThe smallest pixel button is50 x50 pixelThe left and right sides,The desktopThe smallest pixel button is32 x32 pixels
  6. Inside the button isicon + The textIs more effective than pureThe tooltipIt is better to
  7. The rounded buttonThought thanThe sharpThe edges are friendlier,
  8. If you are using rounded buttons, remember to match the on-screen onesOther elementswithThe same proportion of rounded corners

The final result

Add HTML files

  1. The HTML part is as simple as adding a class namelearn-more 的 <button></button>
<button class="learn-more">Learn More</button>
Copy the code

2. Add the CSS file

Initialize the page first

  1. Set up the* 为 box-sizing: border-box
  2. Set up thebodyKeep the whole project centered
* {
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: "Rubik", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    background: #fff;
}
Copy the code

The main CSS code

button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
}

button.learn-more {
    font-weight: 600;
    color: #382b22;
    text-transform: uppercase;
    padding: 1.25 em 2em;
    background: #fff0f0;
    border: 2px solid #b18597;
    border-radius: 0.75 em;
    transform-style: preserve-3d;
    transition: transform 150ms cubic-bezier(0.0.0.58.1), background 150ms cubic-bezier(0.0.0.58.1);
}

button.learn-more::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f9c4d2;
    border-radius: inherit;
    box-shadow: 0 0 0 2px #b18597.0 0.625 em 0 0 #ffe3e2;
    transform: translate3d(0.0.75 em, -1em);
    transition: transform 150ms cubic-bezier(0.0.0.58.1), box-shadow 150ms cubic-bezier(0.0.0.58.1);
}

button.learn-more:hover {
    background: #ffe9e9;
    transform: translate(0.0.25 em);
}

button.learn-more:hover::before {
    box-shadow: 0 0 0 2px #b18597.0 0.5 em 0 0 #ffe3e2;
    transform: translate3d(0.0.5 em, -1em);
}

button.learn-more:active {
    background: #ffe9e9;
    transform: translate(0em.0.75 em);
}

button.learn-more:active::before {
    box-shadow: 0 0 0 2px #b18597.0 0 #ffe3e2;
    transform: translate3d(0.0, -1em);
}
Copy the code

❤️ thank you

If this article is helpful to you, please support it by clicking a “like”. Your “like” is my motivation for writing.

If you like this article, you can “like” + “favorites” + “forward” to more friends.