source web musik sederhana dengan html,CSS dan js

source web musik sederhana dengan html,CSS dan js

Hay gan 

Gimana kabar nya sehat kan hehehe..

Di postingan kali ini saya bakal ngasih source apk musik berbasis web sederhana 



Langsung aja 

Download dulu file nya Dwonload

Exstrak file nya ke folder kosong yang gada file penting atau file lain nya  


Kalo mau liat hasil nya . pencet file index html 


Kalo mau ngubah MP3 atau jpg nya ada di file main.js 



Kalo blom mengerti bisa tulis di kolom komentar di bawah 

Atau langsung ke owner nya di menu contact 

Sekian dulu tutorial dari saya 

Jumpa lagi di postingan berikutnya




Source code Tombol keren dengan html dan css

Source code Tombol keren dengan html dan css



Membuat button seperti contoh di atas 


Untuk membuat nya cukup mudah 

Bahan 

- Folder kosong 
- File index.html 
- File style.css 

Langsung aja 

Pertama buat folder kosong di file penyimpanan 

Kedua 
Copy SC index.html ini 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Button</title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <a href="https://wa.me/6285336889508">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Neon Button</a>
</body>
</html>

Simpan file html di atas ke folder kosong yg sudah di buat tadi

Ketiga copy SC style.css ini 

body{

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    background: #031321;

    font-family: poppins;

}
a{

border-radius: 1px solid #000;

    position: relative;

    display: inline-block;

    padding: 15px 30px;

    color: #2196f3;

    text-transform: uppercase;

    letter-spacing: 4px;

    text-decoration: none;

    font-size: 24px;

    overflow: hidden;

    transition: 0.2s;

}
a:hover{

    border-radius: 1px solid #000;

    color: #255784;

    background: #2196f3;

    box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80 #2196f3;

    transition-delay: 0.5s;

}
body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #031321;
    font-family: Arial, Helvetica, sans-serif;
  }
  a{
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    color: #2196f3;
    text-transform : uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    font-size: 24px;
    overflow: hidden;
    transition: 0.2s;
  }
  a:hover{
    color: #255784;
    background: #2196f3;
    box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
    transition-delay: 1s;
  }
  a span{
    position: absolute;
    display: block;
  }
  a span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#2196f3);
  }
  a:hover span:nth-child(1) {
    left: 100%;
    transition: 1s;
  }
  a span:nth-child(3) {
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#2196f3);
  }
  a:hover span:nth-child(3) {
    left: 100%;
    transition: 1s;
    transition-delay: 0.5s;
  }
  a span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#2196f3);
  }
  a:hover span:nth-child(2) {
    top: 100%;
    transition: 1s;
    transition-delay: 0.25s;
  }
  a span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#2196f3);
  }
  a:hover span:nth-child(4) {
    bottom: 100%;
    transition: 1s;
    transition-delay: 0.75s;
  }

Dan simpan juga file CSS di atas  ke folder kosong 
Dengan file html nya

Lalu liat hasil nya di file index.html  

 



Sekian dulu tutorial dari saya