Share code widget Price Box
Mở đầu
Hướng dẫn
Bước 1: Dán toàn bộ CSS bên dưới vào trước thẻ ]]></b:skin>.
/*Price Box Winta*/
.tableWrap {
position: relative;
width: 350px;
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 3px 5px 30px 5px rgba(46, 56, 77, .1);
margin: auto
}
.tableWrap .tab {
height: 55px;
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 30px;
position: relative
}
.tab label {
height: 100%;
z-index: 2;
width: 30%;
display: flex;
cursor: pointer;
font-size: 15px;
position: relative;
align-items: center;
justify-content: center;
transition: color 0.3s ease
}
#tab-1:checked~.tab .tab-1, #tab-2:checked~.tab .tab-2, #tab-3:checked~.tab .tab-3 {
color: #fefefe
}
.tab label:nth-child(2) {
width: 40%
}
.tab .tabSlider {
position: absolute;
height: 85%;
border-radius: inherit;
background: #509600;
opacity: .8;
transition: all 0.3s ease
}
#tab-1:checked~.tab .tabSlider {
left: 0%;
width: 90px;
transform: translateX(5%)
}
#tab-2:checked~.tab .tabSlider {
left: 50%;
width: 120px;
transform: translateX(-50%)
}
#tab-3:checked~.tab .tabSlider {
left: 100%;
width: 95px;
transform: translateX(-105%)
}
.tableWrap input[type='radio'] {
display: none
}
.tableCard {
overflow: hidden
}
.tableCard .tableCards {
display: flex;
width: 300%
}
.tableCards .tableS {
width: 33.4%
}
.tableCards .tableRow-1 {
transition: all 0.3s ease
}
#tab-1:checked~.tableCard .tableCards .tableRow-1 {
margin-left: 0%
}
#tab-2:checked~.tableCard .tableCards .tableRow-1 {
margin-left: -33.4%
}
#tab-3:checked~.tableCard .tableCards .tableRow-1 {
margin-left: -66.8%
}
.tableS .tableDetail {
margin: 20px 0;
text-align: center;
padding-bottom: 25px;
border-bottom: 1px solid #e6e6e6
}
.tableDetail .tableHarga {
font-size: 55px;
font-weight: 600;
position: relative
}
.tableDetail .tableHarga:before, .tableDetail .tableHarga:after {
position: absolute;
font-weight: 400
}
.tableDetail .tableHarga:before {
left: -30px;
top: 17px;
font-size: 20px
}
.tableDetail .tableHarga:after {
content: '$';
right: -27px;
bottom: 12px;
font-size: 23px;
font-weight: 600
}
.tableDetail p {
font-size: 18px;
margin-top: 5px
}
.tableS .tableContent li {
display: flex;
font-size: 15px;
list-style: none;
margin-bottom: 10px;
align-items: center
}
.tableContent li svg {
flex-shrink: 0;
height: 20px;
margin-right: 10px;
margin-top: 4px;
stroke: #509600;
fill: none;
}
.tableContent li span {
margin-left: 10px
}
.tableWrap .buttonx {
width: 90%;
border-radius: 25px;
border: 1px #ccc solid;
outline: none;
height: 50px;
font-size: 18px;
color: #444;
cursor: pointer;
margin: 20px 25px 20px 10px;
background: transparent;
transition: transform 0.3s ease;
align-items: center
}
.tableWrap .buttonx:hover {
transform: scale(0.98);
border: 1px #509600 solid;
color: #509600;
outline: none
}
/* CSS darkmode */
.darkMode .tableWrap {
background-color: #1e1e1e;
color: #fefefe
}
.darkMode .tableWrap .tab, .darkMode .tableS .tableDetail, .darkMode .tableWrap .buttonx {
border-color: rgba(255, 255, 255, .1)
}
Bước 2: Chèn HTML dưới đây vào bài viết nào bạn muốn.
<div class="tableWrap">
<input id="tab-1" name="tabSlider" type="radio" /><input
checked=""
id="tab-2"
name="tabSlider"
type="radio"
/><input id="tab-3" name="tabSlider" type="radio" />
<div class="tab">
<label for="tab-1" class="tab-1">Free</label
><label for="tab-2" class="tab-2">Personal</label
><label for="tab-3" class="tab-3">Developer</label>
<div class="tabSlider"></div>
</div>
<div class="tableCard">
<div class="tableCards">
<div class="tableS tableRow-1">
<div class="tableDetail">
<span class="tableHarga">0</span>
<p>Personal Use</p>
</div>
<ul class="tableContent">
<li>
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line></svg
><span>Lisensi</span>
</li>
<li>
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line></svg
><span>Support</span>
</li>
<li>
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line></svg
><span>Gratis Update Versi Te
aru</span>
</li>
<li>
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line></svg
><span>Hapus Cridit Link</span>
</li>
</ul>
<button class="buttonx">Download</button>
</div>
<div class="tableS">
<div class="tableDetail">
<span class="tableHarga">5</span>
<p>Enterprise</p>
</div>
<ul class="tableContent">
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg
><span>Max 3 Domain</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg
><span>Support 1 Bulan</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg
><span>Gratis Update Versi Tearu</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg
><span>Hapus Cridit Link</span>
</li>
</ul>
<button class="buttonx">Buy Now</button>
</div>
<div class="tableS">
<div class="tableDetail">
<span class="tableHarga">10</span>
<p>Pro</p>
</div>
<ul class="tableContent">
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg
><span>Unlimited Lisensi</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg
><span>Support 12 Bulan</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg
><span>Gratis Update Versi Terbaru</span>
</li>
<li>
<svg viewbox="0 0 24 24">
<path d="M22 11.07V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="23 3 12 14 9 11"></polyline></svg
><span>Hapus Cridit Link</span>
</li>
</ul>
<button class="buttonx">Buy Now</button>
</div>
</div>
</div>
</div>
Demo
Personal Use
- Lisensi
- Support
- Gratis Update Versi Te aru
- Hapus Cridit Link
Enterprise
- Max 3 Domain
- Support 1 Bulan
- Gratis Update Versi Tearu
- Hapus Cridit Link
Pro
- Unlimited Lisensi
- Support 12 Bulan
- Gratis Update Versi Terbaru
- Hapus Cridit Link
Do code sử dụng HTML với CSS nên không ảnh hưởng gì đến tốc độ load của trang nhé.
Lời kết
Chúc các bạn thành công và đừng quên để lại bình luận, đánh giá bên dưới nhé!
3 comments
winta
image quote pre code