HEADER ADS 728X90

How to make animated gradient text button using HTML & CSS | css animation tutorial | CodePrime

codeprime,css,tutorial,image animation in html and css,image animation css,how to autoplay video in html,cryptocurrency tracker project,animated button,gradient text in css,how to make animated button in css,how to make animated button in html,how to create animated button in html,css animation tutorial,css animation effects,css animation full course,how to make animated website design using html and css,animated link button coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to "CodePrime" Blog . In this post you are going to learn,How to make animated gradient text button using . First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>animated button</title>
</head>
<body>

    <a href="https://codeprime.club" class="btn-head">

        <div class="btn">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcrgVTZkSux1Gqm0CReNXvGC7sAoYrQqW3P_B7wRDaYZjkDGR3LsGMEl0WfdGEixd2buvkSnAkm5mZMLNgqqsynOF4C3KAbbrkGpXTreAdddXkxO8CZGLySKus4fA40t3_oI46-NIMi2FAMq749cHs89MAdd5TV1YQSl1U3-BpxH_PyK2or1FzUlSu_g/s1600/btn-circle-img.png" alt="">
            <p>JOIN NOW</p>
        </div>
    </a>
   
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDmOmgZde-fdYLygHXioKlKQjRqTB36VN5uULd8TGcXElh20otWrR8WmDAs7uY3f1GFYskr6Meo8UgwQ7ckYVQr5MqXWAIFErpsUUij54OHb6_JpjYlAlaA9mKfCZEiDmuHPHWsw636I7EzYIkfZRkpgA3842CzQMAOIdIhIdK8jyhAW9WNsaUn0qS_w/s1600/bg.png);
    background-size: cover;
}

.btn-head {
    border-radius: 80px;
    border: 1px solid #393961 ;
    text-decoration: none;
}
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 8px 50px;
    border-radius: 80px;
    margin: 8px;
    background: #393961;
    transition: 0.3s;
}
.btn img {
    margin-right: 10px;
    margin-left: -15px;
    transition: 0.5s;
}



.btn-head:hover > .btn {
    padding: 15px 80px;
    margin: 15px;
}

.btn-head:hover > .btn img {
    animation: circle 0.5s linear;

}

.btn-head:hover > .btn p {
   letter-spacing: 2px;
   font-size: 2rem;

}

@keyframes circle {
    100% {
        transform: rotate(360deg);
    }
   
}


@supports (-webkit-background-clip: text) {
    .btn p{
        background: linear-gradient(45deg, #3a8fd0, #ab5cd2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: 0.5s;
        font-size: 1.5rem;
    }
}

Youtube Tutorial

FLOW US ON SOCIAL MEDIA

Post a Comment

0 Comments

Join Telegram