Checkbox: Modern UI Element
Checkbox: Modern UI Element https://weaverex.com/wp-content/uploads/2024/08/Modern-UI-Element-1.mp4 .wrap-check-4 *, .wrap-check-4 *::before, .wrap-check-4 *::after { box-sizing: border-box; } .wrap-check-4 label { display: block; width: 35px; height: 35px; cursor: pointer; } .wrap-check-4 input { visibility: hidden; display: none; } .wrap-check-4 input:checked ~ .checkbox { transform: rotate(45deg); width: 14px; margin-left: 12px; border-color: #24c78e; border-top-color: transparent; border-left-color: transparent; border-radius: 0; } […]
Round Checkbox interactive Selection
Round Checkbox Interactive Selection https://weaverex.com/wp-content/uploads/2024/08/Interactive-Selection-1.mp4 .wrap-check-29 { position: relative; } .wrap-check-29 > svg { position: absolute; top: -130%; left: -170%; width: 110px; pointer-events: none; } .wrap-check-29 * { box-sizing: border-box; } .wrap-check-29 input[type=”checkbox”] { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; cursor: pointer; margin: 0; } .wrap-check-29 input[type=”checkbox”]:focus { outline: 0; } .wrap-check-29 .cbx […]
Border Effect Stylish Button
Button Effect Stylish Button Button https://weaverex.com/wp-content/uploads/2024/07/border-effect-1.mp4 .btn-hover-border { –b: 3px; /* border thickness */ –s: .45em; /* size of the corner */ –color: #373B44; padding: calc(.5em + var(–s)) calc(.9em + var(–s)); color: var(–color); –_p: var(–s); background: conic-gradient(from 90deg at var(–b) var(–b), #0000 90deg,var(–color) 0) var(–_p) var(–_p)/calc(100% – var(–b) – 2*var(–_p)) calc(100% – var(–b) – 2*var(–_p)); […]
Animated Checkbox Toggle
Animated Checkbox Toggle https://weaverex.com/wp-content/uploads/2024/07/Animated-Checkbox-Toggle.mp4 .wrap-check-25 .check { –size: 40px; position: relative; background: linear-gradient(90deg, #f19af3, #f099b5); line-height: 0; perspective: 400px; font-size: var(–size); } .wrap-check-25 .check input[type=”checkbox”], .wrap-check-25 .check label, .wrap-check-25 .check label::before, .wrap-check-25 .check label::after, .wrap-check-25 .check { appearance: none; display: inline-block; border-radius: var(–size); border: 0; transition: .35s ease-in-out; box-sizing: border-box; cursor: pointer; } .wrap-check-25 .check […]
Round Checkbox Effect
Round Checkbox https://weaverex.com/wp-content/uploads/2024/07/Interactive-flex-cards-expand-smoothly-on-hover-to-draw-attention-providing-an-engaging-and-responsive-user-experience-across-all-devices._3.mp4 .wrap-check-10 * { -webkit-tap-highlight-color: transparent; outline: none; } .wrap-check-10 input[type=”checkbox”] { display: none; } .wrap-check-10 label { –size: 50px; –shadow: calc(var(–size) * .07) calc(var(–size) * .1); position: relative; display: block; width: var(–size); height: var(–size); margin: 0 auto; background-color: #f72414; border-radius: 50%; box-shadow: 0 var(–shadow) #ffbeb8; cursor: pointer; transition: 0.2s ease transform, 0.2s […]
Glow Button: Illuminating Effects
Glow Button: Illuminating Effects https://weaverex.com/wp-content/uploads/2024/07/2024-07-25-17-49-03-online-video-cutter.com_.mp4 Glow Button https://weaverex.com/wp-content/uploads/2024/12/2-1.mp4 .btn-101, .btn-101 *, .btn-101 :after, .btn-101 :before, .btn-101:after, .btn-101:before { border: 0 solid; box-sizing: border-box; } .btn-101 { -webkit-tap-highlight-color: transparent; -webkit-appearance: button; background-color: #000; background-image: none; color: #fff; 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 […]
Checkbox Toggle Animation
Checkbox Toggle Animation https://weaverex.com/wp-content/uploads/2024/07/2024-07-24-17-38-34-online-video-cutter.com_.mp4 https://weaverex.com/wp-content/uploads/2024/07/Checkbox-Toggle-Animation.mp4 .wrap-check-60 { box-sizing: border-box; –background-color: #fff; –checkbox-height: 25px; } @-moz-keyframes dothabottomcheck-19 { 0% { height: 0; } 100% { height: calc(var(–checkbox-height) / 2); } } @-webkit-keyframes dothabottomcheck-19 { 0% { height: 0; } 100% { height: calc(var(–checkbox-height) / 2); } } @keyframes dothabottomcheck-19 { 0% { height: 0; } 100% […]
Icon Focus Button Effect
Icon Focus Button Effect https://weaverex.com/wp-content/uploads/2024/07/2024-07-23-18-58-56-online-video-cutter.com_.mp4 https://weaverex.com/wp-content/uploads/2024/07/Icon-Focus-Buton-Effect.mp4 .btn-95, .btn-95 *, .btn-95 :after, .btn-95 :before, .btn-95:after, .btn-95:before { border: 0 solid; box-sizing: border-box; } .btn-95 { -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 […]
Animated Checkbox Toggle Effect
Animated Checkbox Toggle Effect https://weaverex.com/wp-content/uploads/2024/07/2024-07-23-19-09-16-online-video-cutter.com_-2.mp4 https://weaverex.com/wp-content/uploads/2024/07/Animated-Checkbox-Toggle-Effect.mp4 .wrap-check-61 input[type=”checkbox”] { background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -webkit-linear-gradient(left, #f66 50%, #6cf 50%); background-size: 100% 100%, 200% 100%; background-position: 0 0, 15px 0; border-radius: 25px; box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5), inset 0 0 10px hsla(0,0%,0%,.5), 0 0 0 1px hsla(0,0%,0%,.1), 0 -1px 2px 2px hsla(0,0%,0%,.25), 0 2px 2px 2px hsla(0,0%,100%,.75); […]
Checkbox Animation
Checkbox Animation: Smooth Toggle Transitions https://weaverex.com/wp-content/uploads/2024/07/2024-07-09-16-43-08-online-video-cutter.com_.mp4 https://weaverex.com/wp-content/uploads/2024/12/3-1.mp4 .wrap-check-12 *, .wrap-check-12 *::before, .wrap-check-12 *::after { box-sizing: border-box; } .wrap-check-12 label { background: white; border-radius: 12px; display: flex; height: 50px; padding: 8px; position: relative; transition: transform 300ms ease, box-shadow 300ms ease; width: 116px; } .wrap-check-12 input { display: none; } .wrap-check-12 label:after { animation: move-left-36 400ms; background: […]