jocubeit

Bubbly Button

Inspired by: https://dribbble.com/shots/3975065-With-a-Click-of-a-Button By Gal Shir

Made the bubbles using "radial-gradient" for background-image. I believe this property is so cool that you can draw many things without adding extra divs or pseudo elements (::before and ::after)

A Pen by Nour Saud on CodePen.

License.

jocubeit

.open-close-button

jocubeit

<a href="https://youtu.be/McrMC3SXhUU" target="_blank" data-keyframers-credit style="color: #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<input type="radio" name="choice" id="nav-1" checked>
<input type="radio" name="choice" id="nav-2">
<input type="radio" name="choice" id="nav-3">

<div id="app">
  <nav class="ui-nav">
    <div class="ui-bg">

jocubeit

Daily UI #3 (Fluid Menu)

A Pen by Dragos on CodePen.

License.

jocubeit

<a href="http://waaark.com" class="btn-liquid">
		<span class="inner">Liquid button ?</span>
</a>

jocubeit

App Navigation

Concept for mobile app navigation.

A Pen by Ian Turner on CodePen.

License.

jocubeit

<div id="mobile" class="demo1">
  <div id="burgerBtn"></div>
  <ul id="nav">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="mobileBodyContent">
    <div id="header"></div>

jocubeit

CSS-only blob animation

A Pen by Marcos Silva on CodePen.

License.

jocubeit

<div class="request-loader">
  <span>👋</span>
</div>

jocubeit

.hero
  %h1 Ripples
  %p This is a cool little mixin I made in SCSS for button animations. Hover over the buttons to see the magic! I hope you like it and I hope it comes in handy for you!
  
  %h1 Usage
  %p Usage: Just @include ripples on the button element or any classes you want the animation to be applied. The mixin takes in three parameters, colour, growth field and the size of the button
  
  %a{'href' => 'https://github.com/Jackthomsonn/ripples', 'target' => '_blank'} Get Ripples

.container