This is the 30th 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. Now the mainstream button design is still flat design, combined with color changes, animation effects to achieve click feedback.

Excellent submit 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 iconfont icon library

<link rel="stylesheet" href="https://at.alicdn.com/t/font_2778457_byl9we6lz8o.css?spm=a313x.7781069.1998910419.47&file=font_2778457_byl9we6lz8o.css">
Copy the code

Add HTML files

<div class="btn_wrap">
    <span>Share</span>
    <div class="container">
        <i class="fax iconfont icon-weixin1"></i>
        <i class="fax iconfont icon-qq"></i>
        <i class="fax iconfont icon-xinxi"></i>
        <i class="fax iconfont icon-GitHub"></i>
    </div>
</div>
Copy the code

Add the CSS file

Initialize the page first

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

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background-color: #FEFEFE;
}
Copy the code

The main CSS code

  • Set * to box-sizing: border-box

  • Set the HTML and body to center the entire project

  • Compatible with Chrome, Firefox, IE, Opera browser

    • -moz-On behalf offirefoxBrowser private properties
    • -ms-On behalf ofIEBrowser private properties
    • -webkit-On behalf ofsafari,chromePrivate property
    • -o-On behalf ofOpera
i {
    opacity: 0;
    font-size: 28px;
    color: #1F1E1E;
    will-change: transform;
    -webkit-transform: scale(.1);
    transform: scale(.1);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.btn_wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    width: 240px;
    height: 72px;
    background-color: #EEEEED;
    border-radius: 80px;
    padding: 0 18px;
    will-change: transform;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.btn_wrap:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)}span {
    position: absolute;
    z-index: 99;
    width: 240px;
    height: 72px;
    border-radius: 80px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans'.'Helvetica Neue', sans-serif;
    font-size: 20px;
    text-align: center;
    line-height: 70px;
    letter-spacing: 2px;
    color: #EEEEED;
    background-color: #1F1E1E;
    padding: 0 18px;
    -webkit-transition: all 1.2 s ease;
    transition: all 1.2 s ease;
}

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 240px;
    height: 64px;
    border-radius: 80px;
}

.container i:nth-of-type(1) {
    -webkit-transition-delay: 1.1 s;
    transition-delay: 1.1 s;
}

.container i:nth-of-type(2) {
    -webkit-transition-delay:.9s;
    transition-delay:.9s;
}

.container i:nth-of-type(3) {
    -webkit-transition-delay:.7s;
    transition-delay:.7s;
}

.container i:nth-of-type(4) {
    -webkit-transition-delay:.4s;
    transition-delay:.4s;
}

.btn_wrap:hover span {
    -webkit-transition-delay:.25s;
    transition-delay:.25s;
    -webkit-transform: translateX(-280px);
    transform: translateX(-280px)}.btn_wrap:hover i {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


.dr {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 100px;
}
.fax{
    font-size: 24px;
}
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.