HOW TO MAKE GLOWING KEYBOARD USING HTML AND CSS.

Hello readers, Today in this blog you'll learn how to create a Glowing Keyboard using only HTML & CSS.

Video Tutorial:

index.html

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >
<div class="container">
        <div class="row_one">
            <button>Esc</button>
            <button>F1</button>
            <button>F2</button>
            <button>F3</button>
            <button>F4</button>
            <button>F5</button>
            <button>F6</button>
            <button>F7</button>
            <button>F8</button>
            <button>F9</button>
            <button>F10</button>
            <button>F11</button>
            <button>F12</button>
            <button>prtsc</button>
            <button>Delete</button>
        </div>
        <div class="row_one">
            <button>~</button>
            <button>!1</button>
            <button>@2</button>
            <button>#3</button>
            <button>$4</button>
            <button>%5</button>
            <button>^6</button>
            <button>&7</button>
            <button>*8</button>
            <button>(9</button>
            <button>)0</button>
            <button>-_</button>
            <button>=</button>
            <button class="ent-btn">Backspace</button>
        </div>
        <div class="row_two">
            <button>Tab</button>
            <button>Q</button>
            <button>W</button>
            <button>E</button>
            <button>R</button>
            <button>T</button>
            <button>Y</button>
            <button>U</button>
            <button>I</button>
            <button>O</button>
            <button>P</button>
            <button>{ [</button>
            <button>} ]</button>
            <button>| \</button>
        </div>
        <div class="row_three">
            <button class="ent-btn">Capslock</button>
            <button>A</button>
            <button>S</button>
            <button>D</button>
            <button>F</button>
            <button>G</button>
            <button>H</button>
            <button>J</button>
            <button>K</button>
            <button>L</button>
            <button>: ;</button>
            <button>" '</button>
            <button class="ent-btn">Enter</button>
        </div>
        <div class="row_four">
            <button class="st-btn">Shift</button>
            <button>Z</button>
            <button>X</button>
            <button>C</button>
            <button>V</button>
            <button>B</button>
            <button>N</button>
            <button>M</button>
            <button> < ,</button>
            <button>> .</button>
            <button>? /</button>
           <button class="st-btn">Shift</button>
        </div>
        <div class="row_five">
            <button class="st-btn">Ctrl</button>
            <button>fn</button>
            <button class="emj-btn">:)</button>
            <button>alt</button>
            <button class="space-btn">Space</button>
            <button>alt</button>
            <button class="st-btn">Ctrl</button>
            <button class="emj-btn"><</button>
            <button>+ -</button>
            <button class="emj-btn">></button>
        </div>
    </div>

style.css

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >

body {
    background-color: #44a3ad;
    margin: 0;
    padding: 0;
}
.container{
    margin: 150px 0 0 200px;
    text-align: center;
    justify-content: center;
}
button{
    border: none;
    outline: none;
    width: 70px;
    height: 70px;
    color: #111;
    text-align: center;
    justify-content: center;
    font-weight: 600;
    padding: 15px;
    margin: 2px 0 0px 0;
    margin-left: 5px;
    background: transparent;
    box-shadow: inset 2px 2px 5px #babeec, inset -5px -5px 10px #fff;
    border-radius: 20%;
}
button:hover{
    transform: scale(1.12, 1.12);
    color: #660000;
    font-size: 35px;
}
.row{
    width: 93%;
    height: 70px;
}
.row_one, .row_five{
    margin-top: 15px;
}
.row_two{
    margin: 15px 0 0 27px;
}
.row_three{
    margin: 15px 0 0 25px;
}
.row_four{
    margin: 15px 0 0 20px;
}
.st-btn{
    width: 101px;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
}
.emj-btn{
    width: 50px;
}
.space-btn{
    width: 400px;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
}
.ent-btn{
    width: 120px;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
}

Sagar Developer

HOW TO MAKE GLOWING KEYBOARD USING HTML AND CSS.

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

HOW TO MAKE GLOWING KEYBOARD USING HTML AND CSS.

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form