Membuat Pricing Card Slide Animation dengan HTML & CSS
Membuat Pricing Card Slide Animation dengan HTML & CSS
Membuat Pricing Card Slide Animation dengan HTML & CSS – Hai teman-teman, hari ini di blog ini Anda akan belajar cara membuat Pricing Card dengan Animasi Geser hanya menggunakan HTML & CSS.
Di artikel sebelumnya saya sudah share cara membuat Profile Card menggunakan HTML & CSS dan sekarang saatnya membuat Pricing Card.
Membuat Pricing Card Slide Animation dengan HTML & CSS
Pricing Card adalah elemen desain di situs web komersial untuk menampilkan berbagai paket harga, langganan, atau perbandingan harga.
Dalam desain kami [Pricing Card CSS Murni], ada satu kartu seperti yang dapat Anda lihat pada gambar pratinjau di atas. Dalam kartu ini, ada total 3 paket, dan Anda dapat melihat setiap paket dengan bantuan tab slider yang ditempatkan di atas. Ketika Anda mengklik tab tertentu, paket tertentu akan muncul dengan animasi geser, membuat kartu ini cukup keren.
Dalam artikel ini, Anda akan melihat bagaimana card ini terlihat sangat keren, termasuk animasinya, dan bagaimana card itu dibuat hanya dengan menggunakan HTML & CSS.
Seperti yang sudah saya katakan, ini adalah Card CSS murni dan animasinya juga dilakukan hanya dengan menggunakan HTML & CSS. Untuk membuat tab dapat diklik dan card geser yang sesuai, saya menggunakan input type radio dan tag label tipe HTML. Menggunakan atribut for pada tag label untuk dapat mengontrol tag input.
Jika Anda bingung atau Anda seorang pemula dan sulit untuk memahami bagaimana slide ini sebenarnya mungkin menggunakan tag ini, maka ketahuilah ketika Anda meletakkan id paa tag input dan atribut for pada tag label maka Anda dapat mengontrol tag input dari dari tag label. Coba saja sendiri sesering mungkin dan anda pasti akan mengerti.
Source Code Pricing Card
Untuk membuat program ini, Pertama, anda perlu membuat dua file yaitu satu file HTML dan satu lagi adalah file CSS. Setelah membuat file-file ini cukup tempel kode berikut ke dalam file Anda. Anda juga dapat mengunduh file kode sumber Pricing Card ini dari tombol unduh yang diberikan.
Pertama, buat file HTML dengan nama index.html dan tempel kode yang diberikan di file HTML Anda. Ingat, Anda harus membuat file dengan ekstensi .html.
1. File HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Cards CSS | Flexadia</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="wrapper">
<input type="radio" name="slider" id="tab-1">
<input type="radio" name="slider" id="tab-2" checked>
<input type="radio" name="slider" id="tab-3">
<header>
<label for="tab-1" class="tab-1">Single</label>
<label for="tab-2" class="tab-2">Premium</label>
<label for="tab-3" class="tab-3">Business</label>
<div class="slider"></div>
</header>
<div class="card-area">
<div class="cards">
<div class="row row-1">
<div class="price-details">
<span class="price">13,900</span>
<p>Terbaik Untuk Pemula</p>
</div>
<ul class="features">
<li><i class="fas fa-check maybe"></i><span>1 Website</span></li>
<li><i class="fas fa-check maybe"></i><span>30 GB SSD Storage</span></li>
<li><i class="fas fa-check maybe"></i><span>~10000 Kunjungan Bulanan</span></li>
<li><i class="fas fa-check yes"></i><span>SSL Gratis (senilai Rp 174,355)</span></li>
<li><i class="fas fa-check not"></i><span>Domain Gratis (senilai Rp 139,900)</span></li>
<li><i class="fas fa-check not"></i><span>Tool WordPress Staging</span></li>
</ul>
</div>
<div class="row">
<div class="price-details">
<span class="price">27,900</span>
<p>Terbaik Untuk Profesional</p>
</div>
<ul class="features">
<li><i class="fas fa-check yes"></i><span>100 Website</span></li>
<li><i class="fas fa-check maybe"></i><span>100 GB SSD Storage</span></li>
<li><i class="fas fa-check maybe"></i><span>~25000 Kunjungan Bulanan</span></li>
<li><i class="fas fa-check yes"></i><span>SSL Gratis (senilai Rp 174,355)</span></li>
<li><i class="fas fa-check yes"></i><span>Domain Gratis (senilai Rp 139,900)</span></li>
<li><i class="fas fa-check not"></i><span>Tool WordPress Staging</span></li>
</ul>
</div>
<div class="row">
<div class="price-details">
<span class="price">49,900</span>
<p>Terbaik Untuk Bisnis</p>
</div>
<ul class="features">
<li><i class="fas fa-check yes"></i><span>100 Website</span></li>
<li><i class="fas fa-check yes"></i><span>200 GB SSD Storage</span></li>
<li><i class="fas fa-check yes"></i><span>~100000 Kunjungan Bulanan</span></li>
<li><i class="fas fa-check yes"></i><span>SSL Gratis (senilai Rp 174,355)</span></li>
<li><i class="fas fa-check yes"></i><span>Domain Gratis (senilai Rp 139,900)</span></li>
<li><i class="fas fa-check yes"></i><span>Tool WordPress Staging</span></li>
</ul>
</div>
</div>
</div>
<button>Choose plan</button>
</div>
</body>
</html>2. File CSS
Kedua, buat file CSS dengan nama style.css dan tempel kode yang diberikan di file CSS Anda. Ingat, Anda harus membuat file dengan ekstensi .css.
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
color: rgb(46,28,107);
background: #d17496;
}
.wrapper{
width: 400px;
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 0 0 16px rgb(0 0 0 / 10%);
}
.wrapper header{
height: 55px;
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 30px;
position: relative;
}
header label{
height: 100%;
z-index: 2;
width: 30%;
display: flex;
cursor: pointer;
font-size: 18px;
position: relative;
align-items: center;
justify-content: center;
transition: color 0.3s ease;
}
#tab-1:checked ~ header .tab-1,
#tab-2:checked ~ header .tab-2,
#tab-3:checked ~ header .tab-3{
color: #fff;
}
header label:nth-child(2){
width: 40%;
}
header .slider{
position: absolute;
height: 85%;
border-radius: inherit;
background: #FC5185;
transition: all 0.3s ease;
}
#tab-1:checked ~ header .slider{
left: 0%;
width: 90px;
transform: translateX(5%);
}
#tab-2:checked ~ header .slider{
left: 50%;
width: 120px;
transform: translateX(-50%);
}
#tab-3:checked ~ header .slider{
left: 100%;
width: 95px;
transform: translateX(-105%);
}
.wrapper input[type="radio"]{
display: none;
}
.card-area{
overflow: hidden;
}
.card-area .cards{
display: flex;
width: 300%;
}
.cards .row{
width: 33.4%;
}
.cards .row-1{
transition: all 0.3s ease;
}
#tab-1:checked ~ .card-area .cards .row-1{
margin-left: 0%;
}
#tab-2:checked ~ .card-area .cards .row-1{
margin-left: -33.4%;
}
#tab-3:checked ~ .card-area .cards .row-1{
margin-left: -66.8%;
}
.row .price-details{
margin: 20px 0;
text-align: center;
padding-bottom: 25px;
border-bottom: 1px solid #e6e6e6;
}
.price-details .price{
font-size: 55px;
font-weight: 600;
position: relative;
font-family: 'Noto Sans', sans-serif;
}
.price-details .price::before,
.price-details .price::after{
position: absolute;
font-weight: 400;
font-family: "Poppins", sans-serif;
}
.price-details .price::before{
content: "Rp";
left: -31px;
top: 12px;
font-weight: 500;
font-size: 20px;
}
.price-details .price::after{
content: "/Bln";
right: -33px;
bottom: 12px;
font-size: 16px;
font-weight: 500;
}
.price-details p{
font-size: 18px;
margin-top: 5px;
}
.row .features li{
display: flex;
font-size: 15px;
list-style: none;
margin-bottom: 10px;
align-items: center;
}
.features li i{
background:transparent;
}
.features li i.yes{
color: #00B67A;
}
.features li i.not{
color: #FC5185;
}
.features li i.maybe{
color: #EDA82C;
}
.features li span{
margin-left: 10px;
font-weight: 500;
}
.wrapper button{
width: 100%;
border-radius: 25px;
border: none;
outline: none;
height: 50px;
font-size: 18px;
color: #fff;
cursor: pointer;
margin-top: 20px;
background: #FC5185;
transition: transform 0.3s ease;
}
.wrapper button:hover{
transform: scale(0.98);
}
Itu saja, sekarang Anda telah berhasil membuat Pricing Card menggunakan CSS Murni. Jika kode Anda tidak berfungsi atau Anda menghadapi kesalahan/masalah, silakan download file source code dari tombol download dibawah ini. Ini gratis!.
