HTML AND CSS, YouTube

How to Create Custom Cursor Using Html and CSS 37 cursor property

How to Create Custom Cursor Using Html and CSS - 37 cursor property

Coding BD gave here How to Create Custom Cursor Using Html and CSS. We created a custom mouse pointer. It is the most important part Of, Custom Cursor in CSS. We have given more importance to the v37 cursor property. We have used a w3school cursor property because they need a highly effective tutorial. Thank you so much.

How to Create Custom Cursor Using Html and CSS 37 cursor property

➡️How To Create a Simple Animation Movie Using HTML & CSS: https://youtu.be/7uj3nh-Dn6Y  

➡️ CSS 3d Layered Image Hover Effects CSS: https://www.youtube.com/watch?v=0qdWV… 

➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART… 

➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLky

➡️ CSS Clip Path Hover Circle Hover Effects: https://www.youtube.com/watch?v=cRSgo

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5

➡️  Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF… 

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuV… 

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: https://www.youtube.com/watch?v=6A6Hp… 

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR…  

➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJ… 

➡️ Animated Eid Mubarak 2021 using Html CSS & JavaScript: https://www.youtube.com/watch?v=60H2g

Here is all Source code. You can follow this steps:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. copy HTML code and pest HTML file, copy CSS code and past CSS file
  5. Now give a smile and jump out loud. 😍😍
<!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>Cursor Tips</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main_box">
        <div class="box1 box">1</div>
        <div class="box2 box">2</div>
        <div class="box3 box">3</div>
        <div class="box4 box">4</div>
        <div class="box5 box">5</div>
        <div class="box6 box">6</div>
    </div>
</body>

</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.main_box,
body{
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main_box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.box{
    width: 33%;
    height: 400px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: bold;
    margin: 2px;
    background: #A7ABB7;
}

.box1{
    cursor: url("./custom.png"), pointer;
}
.box2{
    cursor: all-scroll;
}
.box3{
    cursor: e-resize;
}
.box4{
    cursor: grabbing;
}
.box5{
   cursor: progress;
}
.box6{
  cursor: row-resize ;
}

Don’t Forget to Follow me on all Social Network

YouTube: https://www.youtube.com/channel/UCw9etYfx-25oKB_qt1fFNWw

Facebook Page: Coding BD – https://www.facebook.com/codingbd2021

LinkedIn: https://www.linkedin.com/in/sajjat-hossain-0617961b1/

GitHub: https://github.com/cgsaleh8383

#codingbd #cursor #htmlcss

Leave a Reply

Your email address will not be published. Required fields are marked *