Icon Search Input
Icon Search Input 🔍 https://weaverex.com/wp-content/uploads/2024/08/Icon-Search-Input-22.mp4 .wrap-input-17 * { box-sizing: border-box; } .wrap-input-17 .search-box{ width: fit-content; height: fit-content; position: relative; } .wrap-input-17 .input-search{ height: 50px; width: 50px; border-style: none; padding: 10px; font-size: 18px; letter-spacing: 2px; outline: none; border-radius: 25px; transition: all .5s ease-in-out; background-color: #fff; padding-right: 40px; color: #fff; } .wrap-input-17 .input-search::placeholder{ color: rgba(255,255,255,.5); font-size: 18px; […]
Border Transition Focus Effects
Border Transition Focus Effects https://weaverex.com/wp-content/uploads/2024/08/Border-Transition-Focus-Effects-1.mp4 .wrap-input-5 .input { width: 100%; box-sizing: border-box; letter-spacing: 1px; border: 0; padding: 5px 0 7px; border: 1px solid transparent; border-bottom-color: #ccc; transition: 0.4s; background-color: #f5f6fd; height: 36px; } .wrap-input-5 .input:focus { outline: none; padding: 5px 14px 7px; transition: 0.4s; } .wrap-input-5 { width: 80%; margin: 40px 3%; position: relative; } […]
Round Rainbow Checkbox
Round Rainbow Checkbox https://weaverex.com/wp-content/uploads/2024/08/Round-Rainbow-Checkbox.mp4 .wrap-check-35 input[type=”checkbox”] { visibility: hidden; display: none; } .wrap-check-35 *, .wrap-check-35 ::after, .wrap-check-35 ::before { box-sizing: border-box; } .wrap-check-35 .container { display: block; position: relative; cursor: pointer; font-size: 25px; user-select: none; } /* Create a custom checkbox */ .wrap-check-35 .checkmark { position: relative; top: 0; left: 0; height: 1.3em; width: 1.3em; […]
Interactive Search Box Animation
Interactive Search Box Animation https://weaverex.com/wp-content/uploads/2024/08/2024-07-18-17-44-35-online-video-cutter.com_.mp4 https://weaverex.com/wp-content/uploads/2024/08/Interactive-Search-Box-Animation.mp4 .wrap-input-18 { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .wrap-input-18 .search { margin: 20px; } .wrap-input-18 .search > div { display: inline-block; position: relative; } .wrap-input-18 .search > div:after { content: “”; background: white; width: 4px; height: 20px; position: absolute; top: 40px; right: 2px; transform: […]
Button Rainbow Fill Vibrant Transition
Button Rainbow Fill Vibrant Transition Button https://weaverex.com/wp-content/uploads/2024/08/Button-Rainbow-Fill-Vibrant-Transition-1-1.mp4 .btn-55, .btn-55 *, .btn-55 :after, .btn-55 :before, .btn-55:after, .btn-55:before { border: 0 solid; box-sizing: border-box; } .btn-55 { -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 […]
Checkbox Green Check Interactive Toggle
Checkbox Green Check Interactive Toggle turned off on https://weaverex.com/wp-content/uploads/2024/08/Checkbox-Green-Check-Interactive-Toggle-2.mp4 .wrap-check-1 { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .wrap-check-1 input[type=checkbox] { display: none; } .wrap-check-1 input[type=checkbox]:checked + label.checkbox .checkbox__inner .green__ball { transform: translate(-50%, -50%) scale(1); opacity: 1; transition-delay: 150ms; } .wrap-check-1 input[type=checkbox]:checked ~ .checkbox__text { opacity: 1; } .wrap-check-1 input[type=checkbox]:checked ~ […]
OnOff Toggle Button Box
OnOff Toggle Button Box https://weaverex.com/wp-content/uploads/2024/08/OnOff-Toggle-Button-Box.mp4 .wrap-check-30 .tgl { display: none; } .wrap-check-30 .tgl, .wrap-check-30 .tgl:after, .wrap-check-30 .tgl:before, .wrap-check-30 .tgl *, .wrap-check-30 .tgl *:after, .wrap-check-30 .tgl *:before, .wrap-check-30 .tgl + .tgl-btn { box-sizing: border-box; } .wrap-check-30 .tgl::-moz-selection, .wrap-check-30 .tgl:after::-moz-selection, .wrap-check-30 .tgl:before::-moz-selection, .wrap-check-30 .tgl *::-moz-selection, .wrap-check-30 .tgl *:after::-moz-selection, .wrap-check-30 .tgl *:before::-moz-selection, .wrap-check-30 .tgl + .tgl-btn::-moz-selection, .wrap-check-30 .tgl::selection, […]
Alternate-and-Flip Button Effect
Alternate-and-Flip Button Effect Button https://weaverex.com/wp-content/uploads/2024/08/Alternate-and-Flip-Button-Effect-1.mp4 .btn-19, .btn-19 *, .btn-19 :after, .btn-19 :before, .btn-19:after, .btn-19:before { border: 0 solid; box-sizing: border-box; } .btn-19 { -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, […]
Button Slicer Interactive Button Hover
Button Slicer Interactive Button Hover Button https://weaverex.com/wp-content/uploads/2024/08/Button-Slicer-Interactive-Button-Hover-1.mp4 .btn-15, .btn-15 *, .btn-15 :after, .btn-15 :before, .btn-15:after, .btn-15:before { border: 0 solid; box-sizing: border-box; } .btn-15 { -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 […]
Circular Checkbox Animation
Circular Checkbox Animation https://weaverex.com/wp-content/uploads/2024/08/Circular-Checkbox-Animation-1.mp4 .wrap-check-7 input[type=”checkbox”] { display: none; visibility: hidden; } .wrap-check-7 *, .wrap-check-7 *::before, .wrap-check-7 *::after { box-sizing: border-box; } .wrap-check-7 .toggleButton { cursor: pointer; display: block; transform-origin: 50% 50%; transform-style: preserve-3d; transition: transform 0.14s ease; } .wrap-check-7 .toggleButton:active { transform: rotateX(30deg); } .wrap-check-7 .toggleButton input + div { border: 3px solid rgba(0, […]