New page

Main menu

M12 1L21.5 6.5V17.5L12 23L2.5 17.5V6.5L12 1ZM4.5 7.65311V7.65788L12 12V20.689L19.5 16.3469V7.65311L12 3.311L4.5 7.65311Z

Buttons

M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z

Checkboxes

M5 5V19H19V5H5ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM9.86885 15L9.04918 17H6.83333L11 7H13L17.1667 17H14.9508L14.1311 15H9.86885ZM10.6885 13H13.3115L12 9.8L10.6885 13Z

Inputs

M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z

My Favorites

M13 21V11H21V21H13ZM3 13V3H11V13H3ZM9 11V5H5V11H9ZM3 21V15H11V21H3ZM5 19H9V17H5V19ZM15 19H19V13H15V19ZM13 3H21V9H13V3ZM15 5V7H19V5H15Z

My Snippets

M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z

Help

Mobile menu (tabs)

UI-snippets

Tab 1

<article class="wrapperCard" style="background:;color:">
  <div class="wrapperIcon"><button class="btn-66">Button</button>
<style>
.btn-66,
.btn-66 *,
.btn-66 :after,
.btn-66 :before,
.btn-66:after,
.btn-66:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-66 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-66:disabled {
  cursor: default;
}
.btn-66:-moz-focusring {
  outline: auto;
}
.btn-66 svg {
  display: block;
  vertical-align: middle;
}
.btn-66 [hidden] {
  display: none;
}
.btn-66 {
  --height: 40px;
  --progress: 0px;
  border: 2px solid #fff;
  border-radius: 999px;
  box-sizing: border-box;
  color: transparent;
  display: block;
  font-weight: 900;
  line-height: var(--height);
  overflow: hidden;
  padding: 0 60px;
  position: relative;
  text-shadow: 0 calc(var(--progress) * -1) #fff,
    0 calc(var(--height) - var(--progress)) wheat;
  text-transform: uppercase;
  transition: 0.2s;
}
.btn-66:hover {
  --progress: var(--height);
  border-color: wheat;
}
</style></div>
  <div class="wrapperTitle">Text Slide</div>
  <div class="wrapperText">by eluda</div>
</article>

<style>

  /* Details button on card */
._1pRGK ._vo6h6 ._-tU-F {
  visibility: hidden !important;
}

._1pRGK:hover ._vo6h6 ._-tU-F {
  visibility: visible !important;
  opacity: 1;
}
</style>

<script>
$('.icon-details').css({ filter: 'invert(1)' });
</script>

btn button

Moves its background closer from the outside to the inside

Hug 2

Plays the jello animation from animate.css 

Jello

Reveals new text by splitting it alternately from the center

Split Reveal Alternate

Moves one corner from the bottom right to the top left

OverFold

Cross The Line

Sandwish

Has a background that slowly fills up vertically 

Progress Fill Up

Tilts its background from the top left corner

Slanted

Slides a copy of its text vertically with another color 

Text Slide

Has borders mimicking hand-drawn edges and floats up

HandDrawn

3D Button Click

Simulates 3D using html elements and that pushes down 

3D Button 2

Slicer

I Want Attention

Slides its increasingly tilted diagonal to the right

Tilted Diagonal

HandDrawn 1

3D Rotate Left

Slides its two backgrounds successively to the bottom

Double Slide Down

Has a border scaling in on it on hover or click

Icon Focus

slices its background and cycles its content vertically 