I AM LISTENING TO

|

WHAT I LIKE

CSS Design Development SASS

Pretty checkboxes and radio buttons in pure CSS

9. March 2018

Pretty checkboxes and radio buttons in pure CSS

Easily add beautiful checkboxes and radio buttons in pure CSS. Highly customizable via SCSS.

Basic
- Shapes – Square, Curve, Round
- Variants – Default, Fill, Thick
- Colors – Primary, Success, Info, Warning, Danger
- Color types – Solid, Outline
- Animations – Smooth, Tada, Jelly, Pulse, Rotate
Switch – iOS style – Outline, Fill, Slim
Responsive
No JavaScript
Custom Font Icons
SVG Icons
Image support
Toggle between icons / SVG’s / images
Lock
State – Focus, Hover, Indeterminate
Supports frameworks – Bootstrap, Foundation, Sematic UI, Bulma, …
SCSS customization
Supports all modern browsers, including mobile devices
Print friendly

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<div class="pretty p-default">

<input type="checkbox" />

<div class="state">

<label>Default</label>

</div>

</div>

<div class="pretty p-default p-fill">

<input type="checkbox" />

<div class="state">

<label>Fill</label>

</div>

</div>

<div class="pretty p-default p-thick">

<input type="checkbox" />

<div class="state">

<label>Thick</label>

</div>

</div>

Subscribe

0 Comments

Inline Feedbacks

View all comments

Alexander Gräf

Alexander

I am a full-stack developer. My expertise include:

Server, Network and Hosting Environments
Data Modeling / Import / Export
Business Logic
API Layer / Action layer / MVC
User Interfaces
User Experience
Understand what the customer and the business needs

I love programming, design and know my way around server architecture as well. I would never feel complete, with one of these missing.

I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest.

Apart from that, I am a peace loving guy who tries to have people around him that think the same. I truly believe in the principle: “If you help someone, someone will help you, when you need it."

Previous Next

♩
♪
♫
♬
♩
♪
♫
♬