How to use pure CSS to achieve the button hover effect of a small sphere with a rectangular background (with source)

Source: Internet
Author: User
This article brings you the content is about how to use the pure CSS to achieve a small rectangular background button hover effect (with source), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

Effect Preview

Source code Download

Https://github.com/comehope/front-end-daily-challenges

Code interpretation

Defines the DOM, which contains an unordered table with a list item in the list:

<nav>    <ul>        <li>home</li>    </ul></nav>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:lightyellow;}

To hide the boot symbol from the front of the list item:

Nav ul {    padding:0;    List-style-type:none;}

To set the container size:

Nav li {    width:8em;    Height:2em;    font-size:25px;}

To set the text style:

Nav li {    font-size:25px;    Text-align:center;    Line-height:2em;    Font-family:sans-serif;    Text-transform:capitalize;}

To add a pseudo-element, a pseudo-element is 2 balls:

Nav li {    position:relative;} Nav li::before,nav li::after {    content: ';    Position:absolute;    Width:0.6em;    Height:0.6em;    Background-color:gainsboro;    border-radius:50%;}

Position the ball at the left and right ends:

Nav li::before {    top:calc (50%-0.6EM/2);    left:0;} Nav li::after {    bottom:calc (50%-0.6EM/2);    right:0;}

Next, set the button hover effect.

When the mouse hovers over the button, make the ball into a rectangle equal to the size of the container:

Nav li:hover::before,nav li:hover::after {    width:100%;    height:100%;    border-radius:0;}

The first rectangle is shifted slightly to the right, and the color is deepened to form a shadow effect:

Nav li:hover::before {    z-index:-1;    top:0;} Nav li:hover::after {    z-index:-2;    Bottom: -0.4em;    Right: -0.4em;    Filter:brightness (0.8);}

Sets the color of the hover, the background of the pseudo-element becomes blue, and the text turns white:

Nav li:hover {    color:white;} Nav li:hover::before,nav li:hover::after {    background-color:dodgerblue;}

Set the easing time, where the slow-time function of the pseudo-element is animated with a anthropomorphic effect:

Nav li {    transition:0.5s;} Nav li::before,nav li::after {    transition:0.5s cubic-bezier (0.5,-0.5, 0.25, 1.5);}

Add a few more buttons:

<nav>    <ul>        <li>home</li>        <li>products</li>        <li> services</li>        <li>contact</li>    </ul></nav>

Finally, increase the spacing between the buttons:

Nav li {    margin:0.8em;}

Done!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.