Posts

Loding Animation Using HTML and CSS

-
Image
 How to create Loading animation Preview:                Click and Watch :  Loding Animation HTML: <! DOCTYPE html > < html >     < head >         < title > Loading animation </ title >     </ head >     < body >         < div class = "loading" >             < span > L </ span >             < span > O </ span >             < span > A </ span >             < span > D </ span >             < span > I </ span >             < span > N </ span >             < span > G </ span >             < span ...
Post a Comment
Read more

Hover Animation On Button

-
Image
 How to create hover animation on Button lets learn Preview:                    Click & Watch:  Hover On Button HTML: <!DOCTYPE html> <html> <head>     <title>Hover Button</title> </head> <body> <a href="#" class="btn">Hover Me</a> </body> </html> CSS:         body{             background: #000;         }         .btn{             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%,-50%);             text-decoration: none;             font-size: 18px;             padding: 20px 60px;     ...
Post a Comment
Read more

CSS Neon Effect | CSS Hover Animaton

-
Image
 How to crate CSS Neon effect Button using Html and CSS? Preview:          Click and watch:  Css Neon Effect HTML: <! DOCTYPE html > < html >     < head >         < title > Hover animation </ title >     </ head >     < body >         < h1 class = "btn" > Mxgk99 </ h1 >     </ body > </ html > CSS:         body {             font-family : sans-serif ;             background : #000 ;         }         .btn {             color : #fff ;             border : 4px solid #fff ;             padding : 30px 70px ;             width : fit-content ;      ...
Post a Comment
Read more

CSS ripple Animation | How to create Ripple Animation Using Html and Css

-
Image
  Create Netflix Logo Using Html and css - Mxgk99 Preview:  Click and Watch:   Css ripple Animation HTML: <! DOCTYPE html > < html >     < head >         < title > Ripple Animation </ title >     </ head >     < body >         < div class = "ripple" >             < div ></ div >             < div ></ div >         </ div >     </ body > </ html > CSS:   body {             background : #000 ;         }         .ripple {             width : 100px ;             height : 100px ;             margin : 200px auto ;             positio...
Post a Comment
Read more

Spin Text On Mouse Hover - Mxgk99

-
Image
Spin Text On Mouse Hover Pure Html &Css.  Preview: HTML: <! DOCTYPE html > < html > < head >     < title > Spin Text </ title >     < link rel = "stylesheet" type = "text/css" href = "Style.css" > </ head > < body > < ul >     < li > M </ li >     < li > X </ li >     < li > G </ li >     < li > K </ li >     < li > 9 </ li >     < li > 9 </ li > </ ul > </ body > </ html > CSS: * {     margin : 0 ;     padding : 0 ;     background : #ff008b ; } ul { padding : 50px ; margin : 0 ; border : 10px solid #fff ; display : inline-block ; position : absolute ; top : 50% ; left : 50% ; transform : translate ( -50% , -50% ); } ul li {     list-style : none ;     color : #fff ;     float : left ;  ...
Post a Comment
Read more

Gradient Image Border Using Html & Css

-
Image
  How to  Cr eate Gradient Border Around the image when hover using HTML And CSS | Html & Css का उपयोग करके फोटो के चारों तरफ  Gradient Border  कैसे बनाए ।  Preview:            Click to Watch:  Gradient Image Border Using Html & Css HTML: <! DOCTYPE html > < html > < head >     < title > Gradient Border </ title > </ head > < body >     < img src = "Image\User-image.jpg" > </ body > </ html > CSS: body {             background-color : #000 ;         }         img {             width : 150px ;             border-radius : 50% ;             position : absolute ;             top : 50% ;             left : 50% ;     ...
Post a Comment
Read more