Profile Picture
Julian Galluzzo

3D Button

A simple button with a 3D shadow effect - using nothing but HTML and CSS!
Copy component
{"content":[{"id":"wlbwbh","name":"button","parent":"nngmub","children":[],"settings":{"_cssGlobalClasses":[],"text":"GET STARTED","_background":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_typography":{"font-family":"Plus Jakarta Sans","line-height":"1-","font-weight":"800","color":{"hex":"#000000","id":"hcqvca","name":"Color #3"},"font-size":"20"},"_border":{"width":{"bottom":"2","top":"2","left":"2","right":"2"},"style":"solid","color":{"hex":"#000000","id":"hcqvca","name":"Color #3"}},"_boxShadow":{"values":{"offsetX":"2","offsetY":"2","blur":"0"},"color":{"hex":"#000000","id":"hcqvca","name":"Color #3"}},"_boxShadow:hover":{"values":{"offsetX":"6","offsetY":"6","blur":"0"},"color":{"hex":"#000000","id":"hcqvca","name":"Color #3"}},"_cssTransition":"box-shadow 200ms ease, background-color 200ms ease","_background:hover":{"color":{"hex":"#d0f582","id":"zfgdvh","name":"Color #8"}},"tag":"a"}}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.12.1","globalClasses":[],"globalElements":[]}

Similar components

Profile Picture
Julian Galluzzo

3D Shadow Button

Add some realism to your design with this custom CSS button containing inner shadows to create a realistic 3D raised effect.
View now
Copy now
{"content":[{"id":"aitqym","name":"button","parent":"wvcdlq","children":[],"settings":{"text":"Call us now","style":"primary","_cssCustom":"#brxe-aitqym {\n box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.22),\n 0px -5px 5px 0px rgba(0,0,0,0.22) inset,\n 0px 15px 12px -8px rgba(255,255,255,0.22) inset;\n}","_border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"_background":{"color":{"hex":"#f47e6c"}},"_typography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"font-family":"Red Hat Display","font-weight":"700","font-size":"19"},"_padding":{"left":"25","right":"25","bottom":"13","top":"13"},"icon":{"library":"ionicons","icon":"ion-ios-call"},"_cssTransition":"200ms","iconPosition":"left"}}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.12.1","globalClasses":[],"globalElements":[]}
Profile Picture
Julian Galluzzo

Fix With AI Button

A clean button with a gradient, border, and a box shadow. On hover, the shadow expands and the button gets bigger.
View now
Copy now
{"content":[{"id":"ajvfum","name":"div","parent":"vjemgq","children":["juiatz","djsogh"],"settings":{"_display":"flex","_direction":"row","_justifyContent":"center","_alignItems":"center","_padding":{"bottom":"20","top":"20","left":"30","right":"30"},"_typography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"font-family":"Manrope"},"_columnGap":"20","_gradient":{"colors":[{"id":"cfjwmg","color":{"hex":"#1414ff"}},{"id":"wssnsv","color":{"hex":"#6ab1f3","id":"vqhiae","name":"Color #1"}}]},"tag":"a","_border":{"radius":{"top":"100","right":"100","bottom":"100","left":"100"},"width":{"bottom":"2","top":"2","left":"2","right":"2"},"style":"solid","color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_boxShadow":{"values":{"offsetY":"2","blur":"10","spread":"5"},"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.08)","hsl":"hsla(0, 0%, 0%, 0.08)"}},"_boxShadow:hover":{"values":{"offsetY":"2","blur":"10","spread":"5"},"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.13)","hsl":"hsla(0, 0%, 0%, 0.13)"}},"_transform:hover":{"scaleX":"1.05","scaleY":"1.05"},"_cssTransition":"all 200ms ease"},"label":"AI Button"},{"id":"juiatz","name":"icon","parent":"ajvfum","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-wand-magic-sparkles"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"iconSize":"20"},"themeStyles":{}},{"id":"djsogh","name":"div","parent":"ajvfum","children":["vmxksu"],"settings":{},"label":"Button Text"},{"id":"vmxksu","name":"text-basic","parent":"djsogh","children":[],"settings":{"text":"Fix with AI","_typography":{"font-size":"20","line-height":"1","font-weight":"500"}},"label":"Text"}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.12.1","globalClasses":[],"globalElements":[]}
Profile Picture
Julian Galluzzo

Dark Play Store Button

A clean, simple, and dark button prompting your visitors to download your app in the Google Play Store.
View now
Copy now
{"content":[{"id":"zormpc","name":"div","parent":"llvhbr","children":["mapxbs","outfvd"],"settings":{"_display":"flex","_direction":"row","_justifyContent":"center","_alignItems":"center","_padding":{"bottom":"10","top":"10","left":"20","right":"20"},"_typography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"_columnGap":"20","_border":{"radius":{"top":"15","right":"15","bottom":"15","left":"15"},"width":{"bottom":"2","top":"2","left":"2","right":"2"},"style":"solid","color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}},"_gradient":{"colors":[{"id":"cfjwmg","color":{"hex":"#000000","id":"hcqvca","name":"Color #3"}},{"id":"wssnsv","color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"}}]},"tag":"a"},"label":"Google Button"},{"id":"mapxbs","name":"icon","parent":"zormpc","children":[],"settings":{"icon":{"library":"svg","svg":{"id":310,"filename":"Google_Play_2022_icon.svg","url":"https://postpilot.local/wp-content/uploads/2025/02/Google_Play_2022_icon.svg"},"height":"35"},"iconColor":{"hex":"#ffffff","id":"edddcc","name":"Color #2"},"iconSize":"30"},"themeStyles":{}},{"id":"outfvd","name":"div","parent":"zormpc","children":["vpkuak","forwgs"],"settings":{},"label":"Button Text"},{"id":"vpkuak","name":"text-basic","parent":"outfvd","children":[],"settings":{"text":"Get it on","_typography":{"font-size":"14","line-height":"1"},"_margin":{"bottom":"5"}},"label":"Upper Text"},{"id":"forwgs","name":"text-basic","parent":"outfvd","children":[],"settings":{"text":"Google Play","_typography":{"font-size":"25","line-height":"1","font-weight":"500"}},"label":"Lower Text"}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.12.1","globalClasses":[],"globalElements":[]}

Categories

Buttons