DEV Community

Cornea Florin
Cornea Florin

Posted on

Selectable options dashboard made with CSS

#codepen #ui #css #html

Selectable options dashboard made with CSS;

As usual, adding the plain HTML:

<section class="app"> <i class="fa fa-rocket"></i> <h1>It's time to <span class="blue-color">upgrade</span></h1> <h3 class="gray-color">Choose the feature that best fit your needs and you'll be good to go!</h3> <article class="feature1"> <input type="checkbox" id="feature1"/> <div> <span> 20 GB<br/> + $15.00 </span> </div> </article> <article class="feature2"> <input type="checkbox" id="feature2"/> <div> <span> 10 Emails<br/> + $10.00 </span> </div> </article> <article class="feature3"> <input type="checkbox" id="feature3"/> <div> <span> Support<br/> + $65.00 </span> </div> </article> <article class="feature4"> <input type="checkbox" id="feature4" checked/> <div> <span> Coffee<br/> $1.00 </span> </div> </article> <h3> <span class="blue-color">50% </span>discount only today! </h3> <a href="#" class="upgrade-btn">Upgrade</a> <div class="gray-color">terms & conditions apply, the app will never share your private info</div> </section>
Enter fullscreen mode Exit fullscreen mode

Now doing the magic:

body { text-align: center; color: #f5f5f5; background-image: linear-gradient(-90deg , #0c0c0d, #1a1a1a); font-family: 'Roboto'; } .app { max-width: 300px; margin: 0 auto; } .app i { font-size: 80px; animation-duration: 3s; animation-name: slidein; animation-iteration-count: 1; } article { position: relative; width: 140px; height: 100px; margin: 5px; float: left; border: 2px solid #50bcf2; box-sizing: border-box; } article div { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; line-height: 25px; transition: .5s ease; } article input { position: absolute; top: 0; left: 0; width: 140px; height: 100px; opacity: 0; cursor: pointer; } input[type=checkbox]:checked ~ div { background-color: #50bcf2; } .upgrade-btn { display: block; margin: 30px auto; width: 200px; padding: 10px 20px; border: 2px solid #50bcf2; border-radius: 50px; color: #f5f5f5; font-size: 18px; font-weight: 600; text-decoration: none; transition: .3s ease; } .upgrade-btn:hover { background-color: #50bcf2; } .blue-color { color: #50bcf2; } .gray-color { color: #555; } @keyframes slidein { from { margin-top: 100%; width: 300%; } to { margin: 0%; width: 100%; } }
Enter fullscreen mode Exit fullscreen mode

What i want to cherry pick and describe is how i made the custom checkboxes:

 <article class="feature1"> <input type="checkbox" id="feature1"/> <div> <span> 20 GB<br/> + $15.00 </span> </div> </article>
Enter fullscreen mode Exit fullscreen mode 
article { position: relative; width: 140px; height: 100px; margin: 5px; float: left; border: 2px solid #50bcf2; box-sizing: border-box; } article div { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; line-height: 25px; transition: .5s ease; } article input { position: absolute; top: 0; left: 0; width: 140px; height: 100px; opacity: 0; cursor: pointer; } input[type=checkbox]:checked ~ div { background-color: #50bcf2; }
Enter fullscreen mode Exit fullscreen mode

I've created two overlapping elements inside an article, one for the checkbox and one for the container which will have the nicer look;

I made the checkbox as big as the container and I gave it an opacity 0;

Let me know what do you think.

Top comments (0)