How to remove delay when I hover on the <a> tag?

Ask a question
1

How to remove delay from .btn href on hover? but I want to delay for three different .btn showing line by line. Issue is when you hover on the tag then it changes background color & color on hover, but display effect was very late due to delay. When you remove delay then working fine on hover changed fast background color & color.
here is my CSS

* {
                box-sizing: border-box;
            }
            .btn-action {
                width: 990px;
                margin: 0 auto;
                display: block;
            }
            .box {
                width: 300px;
                height: 300px;
                background-color: gray;
                display: inline-block;
                float: left;
                margin: 0 15px;
                text-align: center;
                padding: 20px;
            }
            .btn {
                border: 0;
                background-color: #1b1b1b;
                color: #fff;
                min-width: 1px;
                margin: 0 4px;
                display: inline-block;
                border-radius: 4px;
                width: 37px;
                height: 37px;
                text-align: center;
                vertical-align: middle;
                font-size: 14px;
                padding: 0;
                line-height: 38px;
                opacity: 0;
                transform: translateY(15px);
                -moz-transform: translateY(15px);
                -webkit-transform: translateY(15px);
                -ms-transform: translateY(15px);
                transition-property: transform, opacity;
                -moz-transition-property: transform, opacity;
                -webkit-transition-property: transform, opacity;
                -ms-transition-property: transform, opacity;
                transition: all 0.2s ease-in-out;
                -moz-transition: all 0.2s ease-in-out;
                -webkit-transition: all 0.2s ease-in-out;
                -ms-transition: all 0.2s ease-in-out;
                -o-transition: all 0.2s ease-in-out;
            }
            .box:hover .btn {
                opacity: 1;
                transform: translateY(0px);
                -moz-transform: translateY(0px);
                -webkit-transform: translateY(0px);
                -ms-transform: translateY(0px);
            }
            .btn:nth-child(1) {
                -webkit-transition-delay: 0.1s;
                -moz-transition-delay: 0.1s;
                -o-transition-delay: 0.1s;
                transition-delay: 0.1s;
            }
            .btn:nth-child(2) {
                -webkit-transition-delay: 0.2s;
                -moz-transition-delay: 0.2s;
                -o-transition-delay: 0.2s;
                transition-delay: 0.2s;
            }
            .btn:nth-child(3) {
                -webkit-transition-delay: 0.3s;
                -moz-transition-delay: 0.3s;
                -o-transition-delay: 0.3s;
                transition-delay: 0.3s;
            }
            .btn:hover {
                background-color: #fff;
                color: #000;
            }

here is my HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="btn-action">
            <div class="box">
                <a href="#" class="btn">
                    <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                </a>
            </div>
            <div class="box">
                <a href="#" class="btn">
                    <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                </a>
            </div>
            <div class="box">
                <a href="#" class="btn">
                    <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </a>
                <a href="#" class="btn">
                    <i class="fa fa-heart-o" aria-hidden="true"></i>
                </a>
            </div>
        </section>
Coin iconoffer bounty
add comment

0 Answer

Your Answer