Membuat Animasi Formulir Langganan Email Dengan Html Dan Css
Pada kesempatan kali ini kita akan belajar membuat Animasi Formulir Langganan Email Dengan Html & Css.
PenjelasanFormulir Email Berlanganan adalah halaman untuk menerima Email notifikasi dari sebuah website agar pengguna dapat menerima info terbaru dari artikel yang di upload si pemilik website tersebut.
Pada Code Program ini awalnya ada sebuah tombol bertuliskan subscribe dan bila user mengklik tombol tersebut akan beranimasi buka tutup untuk mengisi formulir Email Berlangganan.
Saya harap anda sudah memahami kode dasar dalam program ini ,dikarenakan saya hanya menggunakan Html Dan Css , jadi jika anda seorang pemula sekalipun dapat mengimplementasikannya , terutama saya menggunakan <input type="checkbox"> dan tag <label> untuk membuat tombol animasinya.
Jika anda menyukai program ini dan ingin mendapatkan kode sumber untuk kebutuhan situs web atau project yang sedang dikerjakan. anda hanya tinggal menyalin kode yang sudah saya sediakan di bawah.
Code
File Html
<!DOCTYPE html>
<!-- Created By sharecode -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- <title>Animated Subscribe Button | sharecode</title> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<input type="checkbox" id="click">
<label class="btn-1" for="click">Subscribe</label>
<div class="field">
<input type="text" placeholder="Email Address">
<label for="click" class="btn-2">Subscribe</label>
</div>
</div>
</body>
</html>
Selanjutnya Tambahkan code Css berikut.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #664AFF;
}
::selection{
color: #fff;
background: #664AFF;
}
.wrapper{
height: 60px;
width: 400px;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
position: relative;
}
.wrapper .btn-1{
position: absolute;
height: 100%;
width: 50%;
color: #664AFF;
background: #fff;
line-height: 60px;
font-size: 27px;
font-weight: 500;
border-radius: 5px;
user-select: none;
cursor: pointer;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
transition: 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .btn-1:active{
transform: scale(0.9);
}
#click:checked ~ .btn-1{
height: 40px;
width: 100px;
opacity: 0;
pointer-events: none;
}
.wrapper .field{
height: 100%;
width: 0%;
opacity: 0;
pointer-events: none;
position: relative;
transition: 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
#click:checked ~ .field{
width: 100%;
opacity: 1;
pointer-events: auto;
}
.wrapper .field input{
height: 100%;
width: 100%;
border: 2px solid #fff;
border-radius: 5px;
padding: 0 130px 0 15px;
font-size: 20px;
outline: none;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.wrapper .field input::placeholder{
color: #999;
font-size: 18px;
}
.wrapper .field .btn-2{
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
font-size: 16px;
color: #fff;
line-height: 40px;
background: #664AFF;
height: 40px;
width: 100px;
user-select: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.wrapper .field .btn-2:active{
transform: translateY(-50%) scale(0.9);
}
.wrapper #click{
display: none;
}
Selesai.Dan lihat hasilnya.
Belum ada Komentar
Posting Komentar