Delete Button with Cross Icon
Delete Button with Cross Icon Delete https://weaverex.com/wp-content/uploads/2024/09/Interactive-flex-cards-expand-smoothly-on-hover-to-draw-attention-providing-an-engaging-and-responsive-user-experience-across-all-devices-2.mp4 .wrap-delete * { margin: 0; padding: 0; box-sizing: border-box; } .button-delete { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .wrap-delete button { width: 150px; height: 50px; cursor: pointer; display: flex; align-items: center; background: red; border: none; border-radius: 5px; box-shadow: 1px […]
Cyber Button: Futuristic Hover Effect
Cyber Button: futuristic hover effect Button https://weaverex.com/wp-content/uploads/2024/09/Cyber-Button-futuristic-hover-effect-1.mp4 .btn-cybr, .btn-cybr::after { width: 180px; height: 86px; font-size: 36px; font-family: ‘Bebas Neue’, cursive; background: linear-gradient(45deg, transparent 5%, #FF013C 5%); border: 0; color: #fff; letter-spacing: 3px; line-height: 88px; box-shadow: 6px 0px 0px #00E6F6; outline: transparent; position: relative; } .btn-cybr::after { –slice-0: inset(50% 50% 50% 50%); –slice-1: inset(80% -6px 0 […]
Checkbox Toggle: Yeah/Nope Flip
Checkbox Toggle: Yeah/Nope Flip https://weaverex.com/wp-content/uploads/2024/09/Checkbox-Toggle-YeahNope-Flip-1.mp4 .wrap-check-41 .tgl { display: none; } .wrap-check-41 .tgl, .wrap-check-41 .tgl:after, .wrap-check-41 .tgl:before, .wrap-check-41 .tgl *, .wrap-check-41 .tgl *:after, .wrap-check-41 .tgl *:before, .wrap-check-41 .tgl + .tgl-btn { box-sizing: border-box; } .wrap-check-41 .tgl::-moz-selection, .wrap-check-41 .tgl:after::-moz-selection, .wrap-check-41 .tgl:before::-moz-selection, .wrap-check-41 .tgl *::-moz-selection, .wrap-check-41 .tgl *:after::-moz-selection, .wrap-check-41 .tgl *:before::-moz-selection, .wrap-check-41 .tgl + .tgl-btn::-moz-selection, .wrap-check-41 .tgl::selection, […]
Toggle Switch: Smooth Color Change Effect
Toggle Switch: Smooth Color Change Effect https://weaverex.com/wp-content/uploads/2024/09/Toggle-Switch-Smooth-Color-Change-Effect-1.mp4 .wrap-check-21 input[type=”checkbox”] { visibility: hidden; display: none; } .wrap-check-21 *, .wrap-check-21 ::after, .wrap-check-21 ::before { box-sizing: border-box; } /* The switch – the box around the slider */ .wrap-check-21 .switch { font-size: 1rem; position: relative; display: inline-block; width: 4em; height: 2em; } /* The slider */ .wrap-check-21 .slider […]
Alert Button: Attention-Grabbing Effect
Alert Button: Attention-Grabbing Effect Alert https://weaverex.com/wp-content/uploads/2024/09/Interactive-flex-cards-expand-smoothly-on-hover-to-draw-attention-providing-an-engaging-and-responsive-user-experience-across-all-devices-1.mp4 .warning-button { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .wrap-warning button { width: 150px; height: 50px; cursor: pointer; font-size: 20px; font-family: ‘Staatliches’, cursive; letter-spacing: 5px; background: #ffc421; border: 2px solid black; box-shadow: 0px 0px 0px rgba(0,0,0,0.4); transition: 500ms; } .wrap-warning button:after […]
3D Button Effect
3D Button Effect Button https://weaverex.com/wp-content/uploads/2024/09/Interactive-flex-cards-expand-smoothly-on-hover-to-draw-attention-providing-an-engaging-and-responsive-user-experience-across-all-devices.mp4 .btn-grey-3d { font-family: “Open Sans”, sans-serif; font-size: 16px; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; color: #000; cursor: pointer; border: 3px solid; padding: 0.25em 0.5em; box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px; position: relative; user-select: none; -webkit-user-select: […]
Round Checkbox with Custom Checkmark
Round Checkbox with Custom Checkmark https://weaverex.com/wp-content/uploads/2024/09/Round-Checkbox-with-Custom-Checkmark-27-1.mp4 .wrap-check-46 input[type=”checkbox”] { visibility: hidden; display: none; } .wrap-check-46 .container { display: block; position: relative; cursor: pointer; font-size: 20px; user-select: none; } .wrap-check-46 .checkmark { position: relative; top: 0; left: 0; height: 1.3em; width: 1.3em; background-color: #ccc; border-radius: 100%; background: #e8e8e8; box-shadow: 3px 3px 5px #c5c5c5, -3px -3px 5px […]
Gooey Button animation
Gooey Button animation Button https://weaverex.com/wp-content/uploads/2024/08/Gooey-Button-animation-26.mp4 .btn-90, .btn-90 *, .btn-90 :after, .btn-90 :before, .btn-90:after, .btn-90:before { border: 0 solid; box-sizing: border-box; } .btn-90 { -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 Shrink Hover Effects
Button Shrink Hover Effects Button https://weaverex.com/wp-content/uploads/2024/08/Button-Shrink-Hover-Effects-24.mp4 .btn-82, .btn-82 *, .btn-82 :after, .btn-82 :before, .btn-82:after, .btn-82:before { border: 0 solid; box-sizing: border-box; } .btn-82 { -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 […]
Wallet Button Animated SVG Text Reveal
Wallet Button Animated SVG Text Reveal buy stuff https://weaverex.com/wp-content/uploads/2024/08/Wallet-Button-Animated-SVG-Text-Reveal-23.mp4 @media (hover: hover) { #creditcard { /* set start position */ transform: translateY(110px); transition: transform 0.1s ease-in-out; /* set transition for mouse enter & exit */ } #money { /* set start position */ transform: translateY(180px); transition: transform 0.1s ease-in-out; /* set transition for mouse enter […]