Neumorphism is a subtle design pattern...

... that reaches out to the user with the use of soft lighting and a 3D aspect. It can be a certain eye-catcher for the first-time user. Also, it doesn't have the wearing-down feel that arises with repeat usage. It can be a long-term choice for your app/website.

How to Use

To use this library, click on the link on the top to go to the CDN and download our css file. Include the file in your project and then pick any component from below and insert it in your HTML. Now, you're good to go.

Cards

placeholder image
Heading Text

Keep building that new binder. There was once a new rainbow that spanned the whole bridge. Now it doesn't. It probably needs your support.

This Link Here
<div class="card">
<div class="card__img">
<img src="../../images/profile/profile-female.jpg" alt="placeholder image"/>
</div>
<div class="card__text">
<h5 class="card__title">Heading Text</h5>
<p class="card__para">Keep building that new binder. There was once a new rainbow that spanned the whole bridge. Now it doesn't. It probably needs your support.</p>
<a class="card__button" href="#">This Link Here</a>
</div>
</div>
view raw trikon-card-1.html hosted with ❤ by GitHub

Inset Card

placeholder image
పల్లె వ్యవసాయం

మా ఊరి ప్రజలు అందరు వ్యవసాయం మీద ఆధారపడి ఉన్నారు. చేసే పని ఏదైన సరే ఆనందంగా,ఆహ్లాదకరంగా ఏంతో నైపుణ్యంతో చేస్తూ ఉంటారు. కూరగాయలు,వరి,అరటి పళ్లు,పసుపు,నూగూ...

దీనిపై క్లిక్ చేయండి
<div class="card--inset">
<div class="card__img">
<img src="../../images/profile/profile-female.jpg" alt="placeholder image"/>
</div>
<div class="card__text--center">
<h5 class="card__title">పల్లె వ్యవసాయం</h5>
<p class="card__para">మా ఊరి ప్రజలు అందరు వ్యవసాయం మీద ఆధారపడి ఉన్నారు. చేసే పని ఏదైన సరే ఆనందంగా,ఆహ్లాదకరంగా ఏంతో నైపుణ్యంతో చేస్తూ ఉంటారు. కూరగాయలు,వరి,అరటి పళ్లు,పసుపు,నూగూ...</p>
<a class="card__button--inset" href="#">దీనిపై క్లిక్ చేయండి</a>
</div>
</div>
view raw trikon-card-2.html hosted with ❤ by GitHub

Image inset Card style

placeholder image
आरम्भ ही सब कुछ

एक प्रोजेक्ट जब शुरू होता है, तो उसमें सभी की आवश्यकता होती है. यदि हमसे किसी को अपेक्षा नहीं तो हमें स्वयं से अपेक्षित होना क्या आवश्यक नहीं?

चलें उधर?
<div class="card">
<div class="card__img--inside">
<img src="../../images/profile/profile-female.jpg" alt="placeholder image"/>
</div>
<div class="card__text">
<h5 class="card__title">आरम्भ करे प्रसन्न</h5>
<p class="card__para">एक प्रोजेक्ट जब शुरू होता है, तो उसमें सभी की आवश्यकता होती है. यदि हमसे किसी को अपेक्षा नहीं तो हमें स्वयं से अपेक्षित होना क्या आवश्यक नहीं?</p>
<a class="card__button" href="#">चलें उधर?</a>
</div>
</div>
view raw trikon-card-3.html hosted with ❤ by GitHub

Circular Image Card Style

placeholder image
Heading Text

There are many ways you can fill this void. Not one of them is the right one. Maybe I don't understand what I am putting across.

Go somewhere
<div class="card">
<div class="card__img--rounded">
<img src="../../images/profile/profile-male-04.png" alt="placeholder image"/>
</div>
<div class="card__text">
<h5 class="card__title">Heading Text</h5>
<p class="card__para">There are many ways you can fill this void. Not one of them is the right one. Maybe I don't understand what I am putting across.</p>
<a class="card__button" href="#">Go somewhere</a>
</div>
</div>
view raw trikon-card-4.html hosted with ❤ by GitHub

Circular Image Full Profile Card

placeholder image
పల్లె వ్యవసాయం

ఇలా అనేక రకాలుగా పంటల సాగు చేస్తూ కొద్దిపాటి దేశ ప్రజలకు ఆహరం అందించడం లో మా ఊరు కూడ ఒక కీలక పాత్ర పోషిస్తూ రైతే దేశానికి వెన్నెముక అనే నానుడిని నిజం చేస్తూ ఉంది.

దీనిపై క్లిక్ చేయండి
<div class="card">
<div class="card__img--rounded">
<img src="../../images/profile/profile-male-02.jpg" alt="placeholder image" />
</div>
<div class="card__text">
<h5 class="card__title">పల్లె వ్యవసాయం</h5>
<p class="card__para">ఇలా అనేక రకాలుగా పంటల సాగు చేస్తూ కొద్దిపాటి దేశ ప్రజలకు ఆహరం అందించడం లో మా ఊరు కూడ ఒక కీలక పాత్ర పోషిస్తూ రైతే దేశానికి వెన్నెముక అనే నానుడిని నిజం చేస్తూ ఉంది.</p>
<ul class="card__icons--left">
<li class="card__icons__item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="card__icons__item">
<a href="#"><i class="fab fa-github"></i></a>
</li>
<li class="card__icons__item">
<a href="#"><i class="fab fa-facebook"></i></a>
</li>
</ul>
<a class="card__button--inset" href="#">దీనిపై క్లిక్ చేయండి</a>
</div>
</div>
view raw trikon-card-5.html hosted with ❤ by GitHub

Large Circular Image Minimal Text Card Design

placeholder image
Heading Text

Lorem ipsum is the brightest burning text in the history of beaver-kind. The colony of the beavers was unsurprisingly unperturbed by this mention.

<div class="card">
<div class="card__img--rounded">
<img src="../../images/profile/profile-male-03.png" alt="placeholder image" />
</div>
<div class="card__text--center">
<h5 class="card__title">Heading Text</h5>
<p class="card__para">Lorem ipsum is the brightest burning text in the history of beaver-kind. The colony of the beavers was unsurprisingly unperturbed by this mention.</p>
<ul class="card__icons--center">
<li class="card__icons__item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="card__icons__item">
<a href="#"><i class="fab fa-github"></i></a>
</li>
<li class="card__icons__item">
<a href="#"><i class="fab fa-facebook"></i></a>
</li>
</ul>
</div>
</div>
view raw trikon-card-6.html hosted with ❤ by GitHub

Minimal Text without Image - Card Style

यह ख़ुशी अकेली नहीं

सुख में चेहरा खिल जायेगा तो दुख में मुरझा जायेगा. यदि एक से लगाव तो दुसरे से गुरेज क्यूँ? मिलके किये गए प्रयास में तो इसे याद रखना ही होगा.

उधर चलें?
<div class="card">
<div class="card__text">
<h5 class="card__title">यह ख़ुशी अकेली नहीं</h5>
<p class="card__para">सुख में चेहरा खिल जायेगा तो दुख में मुरझा जायेगा. यदि एक से लगाव तो दुसरे से गुरेज क्यूँ? मिलके किये गए प्रयास में तो इसे याद रखना ही होगा.</p>
<a class="card__button" href="#">उधर चलें?</a>
</div>
</div>
view raw trikon-card-7.html hosted with ❤ by GitHub

Basic Navigation

<nav class="nav">
<a href="#" class="logo">LOGO</a>
<label for="navigation"><span class="collapse"></span></label>
<input type="checkbox" id="navigation">
<ul class="nav-items">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">About Us</a></li>
<li class="nav-item"><a href="">Project</a></li>
<li class="nav-item"><a href="#">Blog</a></li>
<li class="nav-item"><a href="#">Contact Us</a></li>
</ul>
</nav>
view raw trikon-nav-1.html hosted with ❤ by GitHub

Dropdown Navigation

<nav class="nav flex">
<a href="#" class="logo">LOGO</a>
<label for="navigation-1"><span class="collapse"></span></label>
<input type="checkbox" id="navigation-1">
<ul class="nav-items">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item__dropdown"><a href="#">Pages</a>
<ul class="sub-items">
<li class="sub-item"><a href="#">Accordion</a></li>
<li class="sub-item"><a href="#">Cards</a></li>
<li class="sub-item"><a href="#">Pills</a></li>
<li class="sub-item"><a href="#">Buttons</a></li>
</ul>
</li>
<li class="nav-item"><a href="#">Components</a></li>
<li class="nav-item"><a href="#">Support</a></li>
</ul>
</nav>
view raw trikon-nav-2.html hosted with ❤ by GitHub

Multilevel Dropdown Navigation

<nav class="nav">
<a href="#" class="logo">LOGO</a>
<label for="navigation-2"><span class="collapse"></span></label>
<input type="checkbox" id="navigation-2">
<ul class="nav-items">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item__dropdown"><a href="#">Pages</a>
<ul class="sub-items">
<li class="sub-item sub-item__dropdown"><a href="#">Accordion</a>
<ul class="sub-sub-items">
<li class="sub-sub-item"><a href="#">Type 1</a></li>
<li class="sub-sub-item"><a href="#">Type 2</a></li>
</ul>
</li>
<li class="sub-item"><a href="#">Cards</a></li>
<li class="sub-item sub-item__dropdown"><a href="#">Buttons</a>
<ul class="sub-sub-items">
<li class="sub-sub-item"><a href="#">Type 1</a></li>
<li class="sub-sub-item"><a href="#">Type 2</a></li>
</ul>
</li>
<li class="sub-item"><a href="#">Pills</a></li>
</ul>
</li>
<li class="nav-item"><a href="#">Components</a></li>
<li class="nav-item"><a href="#">Support</a></li>
</ul>
</nav>
view raw trikon-nav-3.html hosted with ❤ by GitHub

Accordion Fix Style

<div class="accordion">
<div class="tab">
<label> <h5>अनुमान</h5>
<input type="radio" checked name="multiple-accordion">
<i class="fas fa-chevron-right"></i>
<div class="accordion__content">
गति से ज़्यादा अनुमान पर भरोसा करना क्या उचित है? यदि आपसे पहले
आपके प्रतिद्वंद्वी को मौका मिल गया तो क्या आप इससे उबर पाएंगे? गति
से ज़्यादा अनुमान पर भरोसा करना क्या उचित है? यदि आपसे पहले आपके
प्रतिद्वंद्वी को मौका मिल गया तो क्या आप इससे उबर पाएंगे? गति से
ज़्यादा अनुमान पर भरोसा करना क्या उचित है? यदि आपसे पहले आपके
प्रतिद्वंद्वी को मौका मिल गया तो क्या आप इससे उबर पाएंगे?
</div>
</label>
</div>
<div class="tab">
<label> <h5>దీనిపై క్లిక్ చేయండి</h5>
<input type="radio" name="multiple-accordion">
<i class="fas fa-chevron-right"></i>
<div class="accordion__content">మా ఊరి ప్రజలు అందరు వ్యవసాయం మీద ఆధారపడి ఉన్నారు. చేసే పని ఏదైన
సరే ఆనందంగా,ఆహ్లాదకరంగా ఏంతో నైపుణ్యంతో చేస్తూ ఉంటారు.
కూరగాయలు,వరి,అరటి పళ్లు,పసుపు,నూగూ... ఇలా అనేక రకాలుగా పంటల సాగు
చేస్తూ కొద్దిపాటి దేశ ప్రజలకు ఆహరం అందించడం లో మా ఊరు కూడ ఒక కీలక
పాత్ర పోషిస్తూ రైతే దేశానికి వెన్నెముక అనే నానుడిని నిజం చేస్తూ
ఉంది.
</div>
</label>
</div>
</label>
</div>
view raw trikon-accordion-1.html hosted with ❤ by GitHub

Accordion Fluid Style

<div class="accordion accordion-multiple">
<div class="tab">
<label>
<h5>Features</h5>
<input type="checkbox">
<i class="fas fa-chevron-right"></i>
<div class="accordion__content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi natus ducimus facilis maiores rem
deserunt reprehenderit, quam quo quia fugit, voluptate enim minima sapiente velit saepe illo. Velit,
officia aspernatur.Eaque laboriosam repudiandae ipsum voluptatum animi. Minus repudiandae non sunt
aliquam delectus laboriosam? Maxime voluptatibus ea quod eum eligendi temporibus architecto,
assumenda dolorum, fugiat labore exercitationem, dolores et qui iusto!
</div>
</label>
</div>
<div class="tab">
<label>
<h5>Work With Us</h5>
<input type="checkbox">
<i class="fas fa-chevron-right"></i>
<div class="accordion__content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi natus ducimus facilis maiores rem
deserunt reprehenderit, quam quo quia fugit, voluptate enim minima sapiente velit saepe illo. Velit,
officia aspernatur.Eaque laboriosam repudiandae ipsum voluptatum animi. Minus repudiandae non sunt
aliquam delectus laboriosam? Maxime voluptatibus ea quod eum eligendi temporibus architecto,
assumenda dolorum, fugiat labore exercitationem, dolores et qui iusto!
</div>
</label>
</div>
</div>
view raw trikon-accordion-2.html hosted with ❤ by GitHub

Tool-tips

Tooltip Top Top Tooltip BottomBottom Tooltip LeftLeft Tooltip RightRight
<a class="tooltip">Tooltip Top <span class="tooltip-top">Top</span></a>
<a class="tooltip">Tooltip Bottom<span class="tooltip-bottom">Bottom</span></a>
<a class="tooltip">Tooltip Left<span class="tooltip-left">Left</span></a>
<a class="tooltip">Tooltip Right<span class="tooltip-right">Right</span></a>
view raw trikon-tooltip.html hosted with ❤ by GitHub

Alerts

Confirmation Alert: This alert confirms that your action was a success!
<div class="row flex">
<div>
<div class="alert alert-success shadow-offset" >
<span class="alert-inner--text"><strong>Confirmation Alert:</strong> This alert confirms that your action was a success!</span>
</div>
</div>
</div>
view raw trikon-alert-1.html hosted with ❤ by GitHub
Danger Alert: This alert highlights that your action can result in an error!
<div class="row flex">
<div>
<div class="alert alert-warning shadow-inset" >
<span class="alert-inner--text"><strong>Danger Alert:</strong> This alert highlights that your action can result in an error!</span>
</div>
</div>
</div>
view raw trikon-alert-2.html hosted with ❤ by GitHub
Confirmed! No issues in site.
<div class="row" >
<div class="alert alert-success shadow-offset">
<span class="alert-inner--icon"><i class="far fa-check-circle"></i></span></span>
<span class="alert-inner--text"><strong>Confirmed!</strong> No issues in site.</span>
<label for="close-button"><i class="fas fa-times"></i></label>
<input type="checkbox" class="toggle" id="close-button">
</div>
</div>
view raw trikon-alert-3.html hosted with ❤ by GitHub
Wait! There could be trouble ahead!
<div class="row" >
<div class="alert alert-success shadow-offset">
<span class="alert-inner--icon"><span class="fas fa-exclamation-circle"></span></span>
<span class="alert-inner--text "><strong>Wait!</strong> There could be trouble ahead!</span>
<label for="close-button"><i class="fas fa-times"></i></label>
<input type="checkbox" class="toggle" id="close-button">
</div>
</div>
view raw trikon-alert-4.html hosted with ❤ by GitHub
Confirm!

triKone is a humble abode of design enthusiasts. We work hard to look stylish. Sometimes, we might looks like posers, but maybe that's just you!

Design choices are not made by designers! They are made by the customers.

<div class="alert alert-success shadow-offset">
<div>
<span class="alert-inner--icon"><i class="far fa-check-circle"></i></span></span>
<span class="alert-heading">Confirm!</span>
</div>
<div>
<p><i class="fas fa-check"></i>triKone is a humble abode of design enthusiasts. We work hard to look stylish. Sometimes, we might looks like posers, but maybe that's just you!</p>
</div>
<div>
<p><i class="fas fa-check"></i>Design choices are not made by designers! They are made by the customers.</p>
</div>
</div>
view raw trikon-alert-5.html hosted with ❤ by GitHub
Warning!

triKone is a humble abode of design enthusiasts. We work hard to look stylish. Sometimes, we might looks like posers, but maybe that's just you!

Design choices are not made by designers! They are made by the customers.

<div class="alert alert-warning shadow-inset">
<div>
<span class="alert-inner--icon"><span class="fas fa-exclamation-circle"></span></span>
<span class="alert-heading">Warning!</span>
</div>
<div>
<p><i class="fas fa-times"></i>triKone is a humble abode of design enthusiasts. We work hard to look stylish. Sometimes, we might looks like posers, but maybe that's just you!</p>
</div>
<div>
<p><i class="fas fa-times"></i>Design choices are not made by designers! They are made by the customers.</p>
</div>
</div>
view raw trikon-alert-6.html hosted with ❤ by GitHub

Switches

Bluetooth
<div class="switch-holder">
<div class="switch-label">
<i class="fab fa-bluetooth-b"></i><span>Bluetooth</span>
</div>
<div class="switch-toggle switch-toggle-bluetooth">
<input type="checkbox" id="bluetooth">
<label for="bluetooth"></label>
</div>
</div>
view raw trikon-switches-1.html hosted with ❤ by GitHub
wi-fi
<div class="switch-holder">
<div class="switch-label">
<i class="fas fa-wifi"></i><span>wi-fi</span>
</div>
<div class="switch-toggle switch-toggle-wifi">
<input type="checkbox" id="wifi">
<label for="wifi"></label>
</div>
</div>
view raw trikon-switches-2.html hosted with ❤ by GitHub
Location
<div class="switch-holder">
<div class="switch-label">
<i class="fas fa-map-marker-alt"></i></i><span>Location</span>
</div>
<div class="switch-toggle switch-toggle-location">
<input type="checkbox" id="location">
<label for="location"></label>
</div>
</div>
view raw trikon-switches-3.html hosted with ❤ by GitHub

Forms

Login form title

Forgot password?
<form class="form" action="" method="">
<div class="form__title">
<h3>Login form title</h3>
</div>
<div class="form__inputs">
<label for="username">Username:</label>
<input class="form__input" type="text" placeholder="Enter your name" name="username" required />
<label for="password">Password:</label>
<input class="form__input" type="password" placeholder="Enter password" name="password" required />
<div class="">
<button class="form__submit" type="submit">Login</button>
</div>
</div>
<div class="form__options flex">
<a class="" href="#">Forgot password?</a>
<button type="submit" class="form__cancel">Cancel</button>
</div>
</form>
view raw login-register-1.html hosted with ❤ by GitHub

Register form title

<form class="form" action="" method="">
<div class="form__title">
<h3>Register form title</h3>
</div>
<div class="form__inputs">
<label for="username">Username:</label>
<input class="form__input" type="text" placeholder="Enter your name" name="username" required />
<label for="useremail">Email:</label>
<input class="form__input" type="email" placeholder="Enter your email" name="useremail" required />
<label for="password">Password:</label>
<input class="form__input" type="password" placeholder="Enter password" name="password" required />
<div class="">
<button class="form__submit" type="submit">Register</button>
</div>
</div>
</form>
view raw login-register-2.html hosted with ❤ by GitHub
Forgot password?
<form class="form--inset" action="" method="">
<div class="">
<label for="username">Username:</label>
<input class="form__input--offset" type="text" placeholder="Enter your name" name="username" required />
<label for="password">Password:</label>
<input class="form__input--offset" type="password" placeholder="Enter password" name="password" required />
<div class="">
<div class="form__terms">
<input type="checkbox" checked="checked" />
<label>Remember me</label>
</div>
<button class="form__submit--inset" type="submit">Login</button>
</div>
</div>
<div class="form__options flex">
<a class="" href="#">Forgot password?</a>
<button type="submit" class="form__cancel--offset">Cancel</button>
</div>
</form>
view raw login-register-3.html hosted with ❤ by GitHub
<form class="form--inset" action="" method="">
<div class="">
<label for="username">Username:</label>
<input class="form__input--offset" type="text" placeholder="Enter your name" name="username" required />
<label for="useremail">Email:</label>
<input class="form__input" type="email" placeholder="Enter your email" name="useremail" required />
<label for="password">Password:</label>
<input class="form__input--offset" type="password" placeholder="Enter password" name="password" required />
<div class="">
<div class="form__terms">
<input type="checkbox" checked="checked" />
<label>Terms & conditions</label>
</div>
<button class="form__submit--inset" type="submit">Sign Up</button>
</div>
</div>
</form>
view raw login-register-4.html hosted with ❤ by GitHub
placeholder image
Forgot password?
<form class="form--inset" action="" method="">
<div class="form__img">
<img src="https://via.placeholder.com/150" alt="placeholder image" />
</div>
<div class="">
<label for="username">Username:</label>
<input class="form__input--offset" type="text" placeholder="Enter your name" name="username" required />
<label for="password">Password:</label>
<input class="form__input--offset" type="password" placeholder="Enter password" name="password" required />
<div class="flex">
<div class="form__terms">
<input type="checkbox" checked="checked" />
<label>Remember me</label>
</div>
<button class="form__submit--inset" type="submit">Login</button>
</div>
</div>
<div class="form__options flex">
<a class="" href="#">Forgot password?</a>
<button type="submit" class="form__cancel--offset">Cancel</button>
</div>
</form>
view raw login-register-5.html hosted with ❤ by GitHub
placeholder image
<form class="form--inset" action="" method="">
<div class="form__img">
<img src="https://via.placeholder.com/150" alt="placeholder image" />
</div>
<div class="">
<label for="username">Username:</label>
<input class="form__input--offset" type="text" placeholder="Enter your name" name="username" required />
<label for="useremail">Email:</label>
<input class="form__input" type="email" placeholder="Enter your email" name="useremail" required />
<label for="password">Password:</label>
<input class="form__input--offset" type="password" placeholder="Enter password" name="password" required />
<div class="flex">
<div class="form__terms">
<input type="checkbox" checked="checked" />
<label>Terms & conditions</label>
</div>
<button class="form__submit--inset" type="submit">Register</button>
</div>
</div>
</form>
view raw login-register-6.html hosted with ❤ by GitHub
Forgot password?
<form class="form--inset" action="" method="">
<div class="">
<div class="inline-inputs">
<label for="username">Username:</label>
<input class="form__input--inline" type="text" placeholder="Enter your name" name="username" required />
</div>
<div class="inline-inputs">
<label for="password">Password:</label>
<input class="form__input--inline" type="password" placeholder="Enter password" name="password" required />
</div>
<div class="flex">
<div class="form__terms">
<input type="checkbox" checked="checked" />
<label>Remember me</label>
</div>
<button class="form__submit--inset" type="submit">Register</button>
</div>
</div>
<div class="form__options flex">
<a class="" href="#">Forgot password?</a>
<button type="submit" class="form__cancel--offset">Cancel</button>
</div>
</form>
view raw login-register-7.html hosted with ❤ by GitHub
<form class="form--inset" action="" method="">
<div class="">
<div class="inline-inputs">
<label for="username">Username:</label>
<input class="form__input--inline" type="text" placeholder="Enter your name" name="username" required />
</div>
<div class="inline-inputs">
<label for="useremail">Email:</label>
<input class="form__input--inline" type="email" placeholder="Enter your email" name="useremail" required />
</div>
<div class="inline-inputs">
<label for="password">Password:</label>
<input class="form__input--inline" type="password" placeholder="Enter password" name="password" required />
</div>
<div class="flex">
<div class="form__terms">
<input type="checkbox" checked="checked" />
<label>Terms & conditions</label>
</div>
<button class="form__submit--inset" type="submit">Register</button>
</div>
</div>
</form>
view raw login-register-8.html hosted with ❤ by GitHub

Login form title

Forgot password?
<form class="form" action="" method="">
<div class="form__title--center">
<h3>Login form title</h3>
</div>
<div class="">
<div class="inline-inputs">
<label for="username">Username:</label>
<input class="form__input--inline" type="text" placeholder="Enter your name" name="username" required />
</div>
<div class="inline-inputs">
<label for="password">Password:</label>
<input class="form__input--inline" type="password" placeholder="Enter password" name="password" required />
</div>
<div class="form__center-container">
<div class="form__terms--center">
<input type="checkbox" checked="checked" />
<label>Remember me</label>
</div>
<button class="form__submit" type="submit">Login</button>
</div>
</div>
<div class="form__options flex">
<a class="" href="#">Forgot password?</a>
<button type="submit" class="form__cancel--offset">Cancel</button>
</div>
</form>
view raw login-register-9.html hosted with ❤ by GitHub

Sign Up form title

<form class="form" action="" method="">
<div class="form__title--center">
<h3>Sign Up form title</h3>
</div>
<div class="">
<div class="inline-inputs">
<label for="username">Username:</label>
<input class="form__input--inline" type="text" placeholder="Enter your name" name="username" required />
</div>
<div class="inline-inputs">
<label for="useremail">Email:</label>
<input class="form__input--inline" type="email" placeholder="Enter your email" name="useremail" required />
</div>
<div class="inline-inputs">
<label for="password">Password:</label>
<input class="form__input--inline" type="password" placeholder="Enter password" name="password" required />
</div>
<div class="form__center-container">
<div class="form__terms--center">
<input type="checkbox" checked="checked" />
<label>Terms & conditions</label>
</div>
<button class="form__submit" type="submit">Register</button>
</div>
</div>
</form>
view raw login-register-10.html hosted with ❤ by GitHub
placeholder image
Forgot password?
<form class="form" action="" method="">
<div class="form__img">
<img src="https://via.placeholder.com/150" alt="placeholder image" />
</div>
<div class="">
<div class="inline-inputs">
<label for="username">Username:</label>
<input class="form__input--inline" type="text" placeholder="Enter your name" name="username" required />
</div>
<div class="inline-inputs">
<label for="password">Password:</label>
<input class="form__input--inline" type="password" placeholder="Enter password" name="password" required />
</div>
<div class="form__center-container">
<div class="form__terms--center">
<input type="checkbox" checked="checked" />
<label>Remember me</label>
</div>
<button class="form__submit" type="submit">Login</button>
</div>
</div>
<div class="form__options flex">
<a class="" href="#">Forgot password?</a>
<button type="submit" class="form__cancel--offset">Cancel</button>
</div>
</form>
view raw login-register-11.html hosted with ❤ by GitHub
placeholder image
<form class="form" action="" method="">
<div class="form__img">
<img src="https://via.placeholder.com/150" alt="placeholder image" />
</div>
<div class="">
<div class="inline-inputs">
<label for="username">Username:</label>
<input class="form__input--inline" type="text" placeholder="Enter your name" name="username" required />
</div>
<div class="inline-inputs">
<label for="useremail">Email:</label>
<input class="form__input--inline" type="email" placeholder="Enter your email" name="useremail" required />
</div>
<div class="inline-inputs">
<label for="password">Password:</label>
<input class="form__input--inline" type="password" placeholder="Enter password" name="password" required />
</div>
<div class="form__center-container">
<div class="form__terms--center">
<input type="checkbox" checked="checked" />
<label>Terms & conditions</label>
</div>
<button class="form__submit" type="submit">Sign Up</button>
</div>
</div>
</form>
view raw login-register-12.html hosted with ❤ by GitHub
<form class="form" action="" method="">
<label for="firstname">Username:</label>
<input class="form__input" type="text" placeholder="Enter your name" name="username" required>
<label for="disable">Disable:</label>
<input class="form__input" type="text" placeholder="This is a disabled input" name="disable" disabled>
<label for="useremail">Email:</label>
<input class="form__input" type="email" placeholder="Enter your email" name="useremail" required>
<label for="phone">Phone:</label>
<input class="form__input" type="tel" placeholder="Enter mobile No." name="phone" required>
<label for="password">Password:</label>
<input class="form__input" type="password" placeholder="Enter your password" name="password">
<label for="url">Url:</label>
<input class="form__input" type="url" placeholder="Enter url" name="url">
</form>
view raw trikon-form-1.html hosted with ❤ by GitHub
<form class="form" action="" method="">
<div class="inline-inputs">
<label for="color">Color:</label>
<input class="form__color-input" type="color" name="address">
</div>
<div class="inline-inputs">
<label for="phone">Month:</label>
<input class="form__input--inline" type="month" name="month">
</div>
<div class="inline-inputs">
<label for="number">Age:</label>
<input class="form__input--inline" type="number" placeholder="Choose age" name="number">
</div>
<div class="inline-inputs">
<label for="search">Search:</label>
<input class="form__input--inline" type="search" placeholder="Search" name="search">
</div>
<div class="inline-inputs">
<label for="time">Time:</label>
<input class="form__input--inline" type="time" name="time">
</div>
<div class="inline-inputs">
<label for="week">Week:</label>
<input class="form__input--inline" type="week" name="week">
</div>
<div class="inline-inputs">
<label for="date">Date:</label>
<input class="form__input--inline" type="date" name="date">
</div>
<div class="inline-inputs">
<label for="datetime-local">Datetime:</label>
<input class="form__input--inline" type="datetime-local" placeholder="Choose date and time" name="datetime-local">
</div>
</form>
view raw trikon-form-2.html hosted with ❤ by GitHub
<form class="form" action="" method="">
<label for="Select">Select:</label>
<select class="form__select" placeholder="Enter your distric">
<option class="form__input" value="option1">Option 1</option>
<option class="form__input" value="option2">Option 2</option>
<option class="form__input" value="option3">Option 3</option>
</select>
<label for="Select">Textarea:</label>
<textarea class="form__textarea" name="textarea" id="" cols="" rows="10" placeholder="Write something"></textarea>
</form>
view raw trikon-form-3.html hosted with ❤ by GitHub

Radio Buttons

<div class="wrapper">
<input class="state" type="radio" name="app" id="a" value="a">
<label class="label" for="a">
<div class="indicator"></div>
<span class="text blink-sucess">success</span>
</label>
</div>
<div class="wrapper">
<input class="state" type="radio" name="app" id="b" value="b">
<label class="label" for="b">
<div class="indicator"></div>
<span class="text blink-failed">failed</span>
</label>
</div>
<div class="wrapper">
<input class="state" type="radio" name="app" id="c" value="c">
<label class="label" for="c">
<div class="indicator"></div>
<span class="text blink-test">test</span>
</label>
</div>
<div class="wrapper">
<input class="state" type="radio" name="app" id="d" value="d">
<label class="label" for="d">
<div class="indicator"></div>
<span class="text blink-confirm">confirm</span>
</label>
</div>
view raw trikon-radio.html hosted with ❤ by GitHub

Badges

Badges
NORMAL
CONFIRM
WARNING
TEST
Badges Links
NORMAL
CONFIRM
WARNING
TEST
<div class="shadow-inset badges" >
<span class="badges-text badge-normal"><strong>NORMAL</strong></span>
</div>
<div class="shadow-inset badges" >
<span class="badges-text badge-sucess"><strong>CONFIRM</strong></span>
</div>
<div class="shadow-inset badges" >
<span class="badges-text badge-warning"><strong>WARNING</strong></span>
</div>
<div class="shadow-inset badges" >
<span class="badges-text badge-test"><strong>TEST</strong></span>
</div>
<div class="shadow-inset badges" >
<a class="badges-text badge-normal" href=""><strong>NORMAL</strong></a>
</div>
<div class="shadow-inset badges" >
<a class="badges-text badge-sucess" href=""><strong>CONFIRM</strong></a>
</div>
<div class="shadow-inset badges" >
<a class="badges-text badge-warning" href=""></span><strong>WARNING</strong></a>
</div>
<div class="shadow-inset badges" >
<a class="badges-text badge-test" href=""></span><strong>TEST</strong></a>
</div>
view raw trikon-badges.html hosted with ❤ by GitHub

Buttons

Click Me Hover Clicked
<section class="button-container">
<a class="button button-click">Click Me</a>
<a class="button button-hover">Hover</a>
<a class="button button-clicked">Clicked</a>
</section>
view raw trikon-button-1.html hosted with ❤ by GitHub

Social Buttons

<div class="social-button flex-center facebook">
<i class="fab fa-facebook-f fa-2x"></i>
</div>
<div class="social-button flex-center twitter">
<i class="fab fa-twitter fa-2x"></i>
</div>
<div class="social-button flex-center github">
<i class="fab fa-github fa-2x"></i>
</div>
<div class="social-button flex-center instagram">
<i class="fab fa-instagram fa-2x"></i>
</div>
view raw trikon-button-2.html hosted with ❤ by GitHub
<section class="Social-media-bar row">
<div class="social-media-bar facebook shadow-offset flex-center">
<span class="alert-inner--icon"><span class="fab fa-facebook-f fa-2x"></span></span>
<span class="alert-inner--text social-media-text"> Login with <strong>Facebook</strong></span>
</div>
</section>
<section class="Social-media-bar row">
<div class="social-media-bar twitter button-hover shadow-offset flex-center">
<span class="alert-inner--icon"><i class="fab fa-twitter fa-2x"></i></span>
<span class="alert-inner--text social-media-text"> Login with <strong>Twitter</strong></span>
</div>
</section>
<section class="Social-media-bar row">
<div class="social-media-bar github shadow-offset button-clicked flex-center">
<span class="alert-inner--icon"><i class="fab fa-github fa-2x"></i></span>
<span class="alert-inner--text social-media-text">Login with <strong>Github</strong></span>
</div>
</section>
view raw trikon-button-3.html hosted with ❤ by GitHub