Pulse Of The Blogosphere » CSS

HOME / Other / CSS / CSS – effect click

CSS – effect click

Author: admin - Posted: 15/07/21 - Update: 23/10/23

<!DOCTYPE html>
<html lang="en">

<style>
    body {
        background-color: green;
        padding-top: 25%;
        text-align: center;
    }

    .button {
        position: relative;
        display: inline-block;
        cursor: pointer;
        margin: 0 auto;
        width: 70px;
        height: 70px;
        font-size: 52px;
        transition: all 0.4s ease-in;
    }

    .button span[class^='ion'] {
        position: relative;
    }

    .button:before {
        content: '';
        background-color: aliceblue;
        border-radius: 50%;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: scale(0.001, 0.001);
    }

    .button:focus {
        outline: 0;
        color: #fff;
    }

    .button:focus:before {
        animation: effect_dylan 0.8s ease-out;
    }

    @keyframes effect_dylan {
        50% {
            transform: scale(1.5, 1.5);
            opacity: 0;
        }

        99% {
            transform: scale(0.001, 0.001);
            opacity: 0;
        }

        100% {
            transform: scale(0.001, 0.001);
            opacity: 1;
        }
    }
</style>

<body>
    <div class="container">
        <div class="button" tabindex="1">
            <span class="ion-help-circled">a</span>
        </div>
        <div class="button" tabindex="2">
            <span class="ion-log-in">b</span>
        </div>
        <div class="button" tabindex="3">
            <span class="ion-help-buoy">c</span>
        </div>
    </div>
</body>

</html>

<!DOCTYPE html>

<style>

body {

background-color: green;

padding-top: 25%;

text-align: center;

}

.button {

position: relative;

display: inline-block;

cursor: pointer;

margin: 0 auto;

width: 70px;

height: 70px;

font-size: 52px;

transition: all 0.4s ease-in;

}

.button span[class^='ion'] {

position: relative;

}

.button:before {

content: '';

background-color: aliceblue;

border-radius: 50%;

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

transform: scale(0.001, 0.001);

}

.button:focus {

outline: 0;

color: #fff;

}

.button:focus:before {

animation: effect_dylan 0.8s ease-out;

}

@keyframes effect_dylan {

50% {

transform: scale(1.5, 1.5);

opacity: 0;

}

99% {

transform: scale(0.001, 0.001);

opacity: 0;

}

100% {

transform: scale(0.001, 0.001);

opacity: 1;

}

</style>

<body>

</div>

</div>

</div>

</body>

</html>

CSS

CSS cơ bản