Skip to main content

How to Make an Animation RGB Color Using CSS || rgb animation in css and html - Creation Code



 Introduction:

In this project, we will create a button which is covered by an animation that creates RGB effect

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">
    <title>RGB button by creation code</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#" class="button">
        <span>CREATION CODE</span>
    </a>
</body>
</html>

CSS:

html, body{
    height: 100%;
    overflow: hidden;
}
body{
    background: #191919;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button{
    background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);
    position: relative;
    padding: 3px;
    display: inline-block;
    border-radius: 8px;
}
.button span{
    display: inline-block;
    background: #191919;
    color: white;
    text-transform: uppercase;
    padding: 2rem 5rem;
    border-radius: 5px;
    font-family: "segoe UI";
    font-weight: 800;
    font-size: 3rem;
}

Follow my socials:

Youtube:https://www.youtube.com/channel/UCU1qNFntn7dCi9uqyvrGKOg

Instagram: https://www.instagram.com/python.math/

Twitter:https://twitter.com/Pritish369

For any question or coding discussion, you can join my discord or telegram:

Discord:https://discord.gg/be7MmSuV

Telegram:https://t.me/Python_Math_Community

Labels:

Comments

Post a Comment

Popular posts from this blog

Draw Minecraft Charater in Python

  Minecraft  is a  sandbox video game  developed by the Swedish video game developer  Mojang Studios . The game was created by  Markus "Notch" Persson  in the  Java programming language . Following several early private testing versions, it was first made public in May 2009 before fully releasing in November 2011, with  Jens Bergensten  then taking over development.  Minecraft  has since been ported to several other platforms and is the  best-selling video game of all time , with over 238 million copies sold and nearly 140 million  monthly active users  as of 2021 . We gonna build a character of Minecraft using our creativity and coding skills so let's drive into the code: Code: import turtle as t def eye ( r , a ):     t . fillcolor ( 'brown' )     t . begin_fill ()     t . circle ( r , a )     t . end_fill () t . begin_fill () t . fillcolor (...
Post a Comment
Read more

How To Draw BMW Logo - In Python

 I know I don't need to introduce BMW as it is a very popular luxury car. Today we gonna draw the BMW logo in python. I know that you can draw it using a pencil and other tools like AutoCAD etc. But we are programmers we talk with computers so let's tell our computer to draw this logo for use with the help of python. Module The only module we will use is that turtle Code: import turtle as t t.begin_fill() t.fillcolor( '#008ac9' ) for i in range ( 50 ):     t.forward( 4 )     t.left( 2 ) t.right(- 80 ) t.forward( 116 ) t.right(- 90 ) t.forward( 132 ) t.end_fill() t.penup() t.pendown() t.right( 90 ) for i in range ( 50 ):     t.forward( 4 )     t.left(- 2 ) t.right( 80 ) t.forward( 116 ) t.forward(- 116 ) t.right( 90 ) t.begin_fill() t.fillcolor( '#008ac9' ) for j in range ( 45 ):     t.forward(- 4 )     t.left(- 2 ) t.right(- 90 ) t.forward( 116 ) t.end_fill() t.right( 180 ) t.forward( 116 ) t.right( 90 ) for i in ...
Post a Comment
Read more

Draw spiderman logo using python | spiderman logo with python turtle

Well like me I think you are also a fan of spiderman. We also do coding so let's create our favorite superhero in python and have some fun with it Module: We only use one simple module in this project that is Turtle Code: from turtle import * bgcolor ( 'red' ) pensize ( 10 ) fillcolor ( 'black' ) begin_fill () circle ( 20 ) end_fill () penup () right ( 90 ) forward ( 5 ) pendown () fillcolor ( 'black' ) begin_fill () right ( 60 ) for i in range ( 6 ):     forward ( 50 )     left ( 60 ) end_fill () penup () left ( 150 ) forward ( 39 ) left ( 90 ) forward ( 9 ) pendown () forward ( 25 ) right ( 60 ) forward ( 15 ) left ( 60 ) forward ( 25 ) penup () backward ( 25 ) right ( 60 ) back ( 15 ) left ( 60 ) backward ( 25 ) left ( 60 ) pendown () backward ( 35 ) left ( 120 ) forward ( 80 ) penup () left ( 40 ) forward ( 30 ) left ( 140 ) pendown () forward ( 110 ) left ( 60 ) forward ( 40 ) right ( 60 ) forward ( 7 ) right ( 60 ) forward ( 20 ) left ( 60 ) forw...
Post a Comment
Read more