css实现移入样式四

<div class="circleScaleBtn"><span>Hover me</span></div>

<style>
        .circleScaleBtn {
            padding: 12px 24px;
            background-color: #e5edff;
            color: #5851ec;
            border-radius: 6px;
            overflow: hidden;
            display: inline-block;
            cursor: pointer;
        }

        .circleScaleBtn,
        .circleScaleBtn span {
            position: relative;
            z-index: 1;
        }

        .circleScaleBtn:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
            transition: opacity .4s cubic-bezier(.19, 1, .22, 1), transform .75s cubic-bezier(.19, 1, .22, 1);
            background-color: #5851ec;
            opacity: 0;
        }

        .circleScaleBtn:hover:before {
            opacity: 1;
            transition-duration: .85s;
            transform: translate3d(-50%, -50%, 0) scaleX(1);
        }

        .circleScaleBtn:hover span {
            color: #e5edff;
        }
    </style>