Form Bukutamu Keren dengan Efek Tulisan Keren

Halo kawan, sudah lama tidak posting artikel ya hehehe, kali ini saya akan membahas bagaimana cara membuat Form bukutamu keren dengan efek tulisan keren, nah untuk yang satu ini berbeda dengan yang dulu, buat kalian yang masih belum tahu model form bukutamu yang dulu bisa dibaca link dibawah ini :

Baca Juga :

Cara Membuat Form Buku Tamu Keren Dengan CSS

Keunggulan dari form bukutamu yang ini adalah, keunggulan desainnya terdapat pada tulisan yang timbul keluar, berikut tampilannya :

Tampilan Form Bukutamu

Untuk kalian yang ingin gambar seperti diatas bisa didownload gambar dengan tulisan Bukutamu dibawah ini, caranya klik kanan gambar dibawah ini, kemudian pilih Views Images :

nah lalu bagaimana cara membuat form bukutamunya...? oke langsung saja kita mulai

1). Buat folder dengan nama bukutamu, kemudian copy source code HTML dibawah ini dan simpan dengan nama index.html

Source Code HTML

<!doctype html>
<html>
    <head>
        <title>Bukutamu Dunia Programming</title>
            <link rel="stylesheet" href="style.css" type="text/css">
    </head>
        <body>
            <form name="form1" enctype="multipart/form-data" method="post" action="Simpan.php">
                <div id="utama">
                    <img src="H.png">
                    <div id="inputan">
                        <div>
                            <input class="nama" name="Nama" type="text" id="TxtNama" size="38" maxlength="25" placeholder="Nama">
                        </div>
                        <div>
                            <input class="alamat" name="Alamat" type="text" id="TxtAlamat" size="38" maxlength="35" placeholder="Alamat"></td>
                        </div>
                        <div>
                            <input class="email" name="Email" type="email" id="TxtEmail" size="38" maxlength="30" placeholder="Email"></td>
                        </div>
                        <div>
                            <input class="kota" name="Kota" type="text" id="TxtKota" size="38" maxlength="20" placeholder="Kota"></td>
                        </div>
                        <div>
                            <textarea name="Pesan" placeholder="Pesan Anda"></textarea>
                        </div>
                        <div>
                            <input class="gambar" name="gambar" type="file" id="gambar" size="30">
                        </div>
                        <div>
                            <div>
                                <input class="button" type="submit" name="submit" value="Simpan">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
</body>
</html>

2). Copy source code CSS dibawah ini, lalu simpan dengan nama style.css

Source Code CSS

body {
    background: #222;
}
a {
    text-decoration: none;
}
input {
    padding: 10px;
    background: #ffffff;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    color: #000000;
    margin-bottom: 4px;
    margin-left: 7px;
}
textarea {
    padding: 10px;
    width: 276px;
    background: #ffffff;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    color: #000000;
    margin-bottom: 4px;
    margin-left: 7px;
}
#utama {
    width: 350px;
    margin: 0 auto;
    margin-top: -35px;
}
#judul {
    font-size: 20px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom: 3px solid #336666;
}
#inputan {
    background-color: #ccc;
    padding: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
input.nama {
    background: #ffffff url(images/user.png)no-repeat 7px 9px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    height: 25px;
    padding: 8px;
    padding-left: 37px;
    margin-bottom: 8px;

    transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
}
input.alamat {
    background: #ffffff url(images/maps.png)no-repeat 7px 9px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    height: 25px;
    padding: 8px;
    padding-left: 37px;
    margin-bottom: 8px;

    transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
}
input.email {
    background: #ffffff url(images/mail.png)no-repeat 7px 9px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    height: 25px;
    padding: 8px;
    padding-left: 37px;
    margin-bottom: 8px;

    transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
}
input.kota {
    background: #ffffff url(images/kota.png)no-repeat 7px 9px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    height: 25px;
    padding: 8px;
    padding-left: 37px;
    margin-bottom: 8px;

    transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
}
input.gambar {
    background: #ccc;
    color: #ffffff;
    height: 40px;
}
input:focus {
    border: 1px solid #26C281;

    transition: 1s all;
    -moz-transition: 1s all;
    -o-transition: 1s all;
}
.button {
    background: #1abc9c;
    color: #ffffff;
    border: 1px solid #1abc9c;
    width: 295px;
    margin-top: 10px;

    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}
.button:hover {
    background: #16a085;
    color: #ffffff;
    border: 1px solid #16a085;

    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}
.button-op {
    background: #1abc9c;
    color: #ffffff;
    border: 1px solid #1abc9c;
    width: 100px;
    margin-top: 10px;
    margin-left: 0px;

    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}
.button-op:hover {
    background: #16a085;
    color: #ffffff;
    border: 1px solid #16a085;

    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}

Setelah langkah diatas kalian lakukan, kemudian, klik file index.html untuk melihat hasilnya

Bagaimana...? keren bukan, pastinya dong keren, dan tentunya beda dengan bukutamu yang dulu.

Lalu, bagaimana ya cara memfungsikan bukutamu diatas, agar bisa digunakan layaknya sebuah program..?

Baca :
Baca :

Sekian tutorial dari saya, apabila kalian mengalami kesulitan dalam pembuatan form Bukutamu, silahkan kalian dapat meinggalkan komentar pada bagian bawah artikel ini. semoga bermanfaat.

Form Bukutamu Keren dengan Efek Tulisan Keren

Baca Juga :

Belum ada Komentar untuk "Form Bukutamu Keren dengan Efek Tulisan Keren"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel