Version: 0.1
How can i use?

Butonlar/ Kullanılan butonlar

<button class="hb-button normal" type="button">Sepete Ekle</button> <button class="hb-button alternative" type="button">Sepete Ekle</button> <button class="hb-button disabled" type="button" disabled="disabled">Sepete Ekle</button>
<button class="hb-button big" type="button">Sepete Ekle</button> <button class="hb-button alternative big" type="button">Sepete Ekle</button> <button class="hb-button disabled big" type="button" disabled="disabled">Sepete Ekle</button>
<button class="hb-button big" type="button"><i class="icon hb-icon-basket_icon_solid_disabled"></i>Sepete Ekle</button> <button class="hb-button alternative big" type="button"><i class="icon hb-icon-occ_icon"></i>Sepete Ekle</button> <button class="hb-button disabled big" type="button" disabled="disabled"><i class="icon hb-icon-basket_icon_solid_disabled"></i>Sepete Ekle</button>

Buton Grupları/ Kullanılan butonlar

<div class="hb-button-group eliptical"> <button class="hb-button active" type="button">Çok Satanlar</button> <button class="hb-button" type="button">En Yeniler</button> <button class="hb-button" type="button">En Düşük Fiyat</button> <button class="hb-button" type="button">En Yüksek Fiyat</button> </div>
<div class="hb-button-group square"> <button class="hb-button active" type="button">Çok Satanlar</button> <button class="hb-button" type="button">En Yeniler</button> <button class="hb-button" type="button">En Düşük Fiyat</button> <button class="hb-button" type="button">En Yüksek Fiyat</button> </div>
<div class="hb-button-group square dark"> <button class="hb-button active" type="button">Çok Satanlar</button> <button class="hb-button with-badge" type="button">En Yeniler<i class="notification">7</i></button> <button class="hb-button" type="button">En Düşük Fiyat</button> <button class="hb-button" type="button">En Yüksek Fiyat</button> </div>

İnputlar/ Kullanılan inputlar

<div class="hb-input-group"> <input class="hb-input" type="text" placeholder="Write Something"> </div><br> <div class="hb-input-group error"> <input class="hb-input" type="text" placeholder="Write Something"> </div><br> <div class="hb-input-group disabled"> <input class="hb-input" type="text" placeholder="Write Something"> </div>


<div class="hb-input-group animate"> <input class="hb-input" type="text"><span class="placeholder">Write Something</span> </div><br> <div class="hb-input-group animate error"> <input class="hb-input" type="text"><span class="placeholder">Write Something</span> </div><br> <div class="hb-input-group animate disabled"> <input class="hb-input" type="text" disabled><span class="placeholder">Write Something</span> </div>
Write Something

Write Something

Write Something
<div class="hb-input-group no-animate"> <input class="hb-input" type="text"><span class="placeholder">Write Something</span> </div><br> <div class="hb-input-group no-animate error"> <input class="hb-input" type="text"><span class="placeholder">Write Something</span> </div><br> <div class="hb-input-group no-animate disabled"> <input class="hb-input" type="text" disabled><span class="placeholder">Write Something</span> </div>
Write Something

Write Something

Write Something
<div class="hb-input-group search"><i class="icon hb-icon-search_icon"></i> <input class="hb-input" type="text"> <button class="hb-button" type="button">ARA</button> </div>
<div class="hb-input-group animate"> <textarea class="hb-input textarea" type="text"></textarea><span class="placeholder">Write Something</span> </div><br> <div class="hb-input-group animate error"> <textarea class="hb-input textarea" type="text"></textarea><span class="placeholder">Write Something</span> </div><br> <div class="hb-input-group animate disabled"> <textarea class="hb-input textarea" type="text" disabled></textarea><span class="placeholder">Write Something</span> </div>
Write Something

Write Something

Write Something
<div class="hb-input-group no-animate"> <textarea class="hb-input textarea" type="text"></textarea><span class="placeholder">Write Something</span> </div><br> <div class="hb-input-group no-animate error"> <textarea class="hb-input textarea" type="text"></textarea><span class="placeholder">Write Something</span> </div><br> <div class="hb-input-group no-animate disabled"> <textarea class="hb-input textarea" type="text" disabled></textarea><span class="placeholder">Write Something</span> </div>
Write Something

Write Something

Write Something

Dropdowns/ Kullanılan dropdown stilleri

<div class="hb-input-group"> <select class="hb-input select" type="text"> <option>Options 1</option> </select><i class="icon hb-icon-selectbox_arrow"></i> </div><br> <div class="hb-input-group"> <select class="hb-input select" type="text"> <option>Options 1</option> </select><i class="icon hb-icon-selectbox_arrow"></i> </div><br> <div class="hb-input-group"> <select class="hb-input select" type="text" disabled> <option>Options 1</option> </select><i class="icon hb-icon-selectbox_arrow"></i> </div>


<div class="hb-input-group no-animate"> <select class="hb-input select" type="text"> <option>Options 1</option> </select><span class="placeholder">Başlık</span><i class="icon hb-icon-selectbox_arrow"></i> </div><br> <div class="hb-input-group no-animate error"> <select class="hb-input select" type="text"> <option>Options 1</option> </select><span class="placeholder">Başlık</span><i class="icon hb-icon-selectbox_arrow"></i> </div><br> <div class="hb-input-group no-animate disabled"> <select class="hb-input select" type="text" disabled> <option>Options 1</option> </select><span class="placeholder">Başlık</span><i class="icon hb-icon-selectbox_arrow"></i> </div>
Başlık

Başlık

Başlık

Checkbox & Radiobox/ Kullanılan checkbox ve radiobox stilleri

<div class="hb-input-group"> <div class="hb-checkbox-content"> <label class="hb-box-value">Seçenek 1</label> <input class="hb-input checkbox" type="checkbox"> <label></label><i class="icon hb-icon-checkbox_tick"></i> </div> </div><br> <div class="hb-input-group"> <div class="hb-radiobox-content"> <label class="hb-box-value">Seçenek 1</label> <input class="hb-input radiobox" type="radio"> <label></label> </div> </div>