Styling an animated button (with a video background) HARD CORNERS BUG

Hi! I’m triying to achieve the same appearence as the Divhunt (new) website buttons, 'cause I loved em all. I’m pretty close, but now when I thought I had everything done, I just got this “bug”, which gives me hard corners (even setting rounded corners) when I hover it. (see image)

Not pretty sure how to fix this :frowning:

Was the entire Divhunt (new) website made on this same builder or is it coded?

Thank you!

image

Hey, thank you, whole website is created in our Builder.

And for button, I guess you are missing overflow hidden on parent div which has border-radius, or on that white div, set border radius same as on purple part.

Give me a website URL and I can be more specific

Hey Stefan @Pakic , thank you!

Is it possible to get a quick tutorial regarding how to make a button like the Divhunt website? So I can replicate your steps and avoid these little details?

I literally set overflow hidden and all border-radius the same. And still getting the same, I’m using Opera.

Thank you!

Hey, its quite complicated process… sometimes in future I might record it, but for now, I can give you JSON code that you can add on your website through JSON tag
image

{"tags":[{"tags":[{"tags":[],"symbol":null,"order":100,"loop":1,"name":"div","label":"Overlay 1","css":{"1920":{"self":{"top":"0%","left":"0%","right":"auto","width":"100%","bottom":"auto","height":"100%","opacity":"50%","z-index":"1","position":"absolute","background":"radial-gradient(72.45% 119.43% at 50% 0%, #C6A9FF 0%, #A375FF 41.15%, #443C86 100%)","mix-blend-mode":"lighten"}}},"text":{},"attributes":{},"classes":{},"conditions":{},"properties":{},"Target":null},{"tags":[],"symbol":null,"order":200,"loop":1,"name":"video","label":"BG","css":{"1920":{"self":{"top":"0%","left":"0%","right":"auto","width":"100%","bottom":"auto","filter":"blur(6px)","height":"100%","z-index":"2","position":"absolute","object-fit":"cover","mix-blend-mode":"hard-light"}}},"text":{},"attributes":{"1":{"loop":"true","type":"video/mp4","muted":"true","preload":"auto","autoplay":"true","data-src":"https://global.divhunt.com/1ae30455a70c5bcdb49de4ed1ac1fcbf_135668.mp4","playsinline":"true"}},"classes":{},"conditions":{},"properties":{},"Target":null},{"tags":[],"symbol":null,"order":300,"loop":1,"name":"span","label":"Span","css":{"480":{"self":{"font-size":"15px"}},"1920":{"self":{"z-index":"5","position":"relative","font-size":"18px"}}},"text":{"1":"Build for free","1707250245958025-1":"Explore Plugins","1707251898496058-1":"Explore Layouts","1707319826357027-1":"Build for Free","1707329145469007-1":"Explore Layouts","1707329167451008-1":"Explore Plugins","1707329184352009-1":"Explore Templates","1707329694535091-1":"Sign up","1707336260390030-1":"Buy $140","1707414953024102-1":"Buy $${value->get('price')}","1707414953029111-1":"Buy $${value->get('price')}","1707522334587003-1":"View all","1707569766904024-1":"Buy $${page->get('data')->get('price')}","1707569953978040-1":"Explore Plugins","1707570250910082-1":"Explore Layouts","1707860625202038-1":"Buy $${value->get('price')}","1707883413601011-1":"Buy $${value->get('price')}","1707884103434017-1":"Buy $${value->get('price')}","1707886132795010-1":"Buy $${value->get('price')}","1707886679572016-1":"Buy $${value->get('price')}","1708043997400003-1":"Buy $${value->get('price')}","1708496776051022-1":"View more","1709306842278007-1":"Explore features","1707516278186024-1000000":"Buy for $140","1707569766904024-1000000":"Buy $${value->get('price')}"},"attributes":{},"classes":{},"conditions":{},"properties":{},"Target":null},{"tags":[],"symbol":null,"order":400,"loop":1,"name":"div","label":"Overlay 2","css":{"1920":{"self":{"top":"0%","left":"0%","right":"auto","width":"100%","bottom":"auto","height":"100%","opacity":"30%","z-index":"3","position":"absolute","background":"radial-gradient(100% 100% at 49.78% 0%, #937EFF 0%, #7756FF 50.52%, #5E39EC 100%)","transition":"all 200ms 0ms linear","mix-blend-mode":"screen"}}},"text":{},"attributes":{"1":{"class":"overlay-2"}},"classes":{"1":[]},"conditions":{},"properties":{},"Target":null},{"tags":[],"symbol":null,"order":500,"loop":1,"name":"img","label":"Image","css":{"1920":{"self":{"width":"17px","height":"17px","z-index":"5","position":"relative"}}},"text":{},"attributes":{"1":{"src":"https://global.divhunt.com/816cd37565db5917de57061b79b4563a_895.svg"},"1708496776051022-1":{"hidden":"true"}},"classes":{},"conditions":{},"properties":{},"Target":null}],"symbol":null,"order":300,"loop":1,"name":"div","label":"Button","attributes":{},"classes":{},"conditions":{},"properties":{},"text":{},"css":{"480":{"self":{"height":"47px","padding-left":"24px","padding-right":"24px"}},"1920":{"self":{"color":"rgb(255,255,255)","width":"100%","height":"60px","display":"flex","opacity":"100%!important","z-index":"2","overflow":"hidden","position":"relative","background":"radial-gradient(60.29% 44.22% at 50% 5.78%, rgba(188,155,255,0.50) 0%, rgba(69,61,135,0.50) 100%)","column-gap":"10px","text-align":"center","align-items":"center","font-weight":"500","padding-left":"35px","border-radius":"11px","padding-right":"35px","flex-direction":"row","letter-spacing":"0.46px","backdrop-filter":"blur(7px)","justify-content":"center","-webkit-backdrop-filter":"blur(7px)"},"::after":{"top":"-2px","left":"-2px","width":"calc(100% + 4px)","height":"calc(100% + 4px)","content":"\"\"","opacity":"0","position":"absolute","background":"radial-gradient(85% 120% at 50% 120%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 100%)","transition":"1s all","border-radius":"999px"}}},"Target":null},{"tags":[{"tags":[],"symbol":null,"order":100,"loop":1,"name":"div","label":"Div","css":{"1920":{"self":{"animation":"borderTurn 2.5s infinite linear","animation-name":"borderTurnWithTranslate","background-size":"cover","background-image":"conic-gradient(from 0 at 50% 50%, rgba(255,255,255,.5) 0deg, rgba(255,255,255,0) 60deg, rgba(255,255,255,0) 310deg, rgba(255,255,255,.5) 360deg)","background-repeat":"no-repeat","background-position":"center center"},"::after":{"clear":"both","content":"\"\"","display":"block"},"::before":{"float":"left","content":"\"\"","padding-top":"100%"}}},"text":{},"attributes":{},"classes":{},"conditions":{},"properties":{},"Target":null}],"symbol":null,"order":200,"loop":1,"name":"div","label":"Border Rotating Mask","css":{"1920":{"self":{"mask":"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)","inset":"0","opacity":"0%","transition":"all 200ms 0ms linear","-webkit-mask":"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)","mask-composite":"exclude","pointer-events":"none","-webkit-mask-composite":"xor"}}},"text":{},"attributes":{},"classes":{},"conditions":{},"properties":{},"Target":null},{"tags":[{"tags":[],"symbol":null,"order":100,"loop":1,"name":"div","label":"Div","css":{"1920":{"self":{"animation":"borderTurn 2.5s infinite linear","background-size":"cover","background-image":"conic-gradient(from 0 at 50% 50%, rgba(255, 255, 255, .5) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, .5) 360deg)","background-repeat":"no-repeat","background-position":"center center"}}},"text":{},"attributes":{},"classes":{},"conditions":{},"properties":{},"Target":null},{"tags":[{"tags":[],"symbol":null,"order":100,"loop":1,"name":"div","label":"Div","css":{"1920":{"self":{"animation":"borderTurn 2.5s infinite linear","background-size":"cover","background-image":"conic-gradient(from 0 at 50% 50%, rgba(255, 255, 255, .5) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, .5) 360deg)","background-repeat":"no-repeat","background-position":"center center"}}},"text":{},"attributes":{},"classes":{},"conditions":{},"properties":{},"Target":null}],"symbol":null,"order":200,"loop":1,"name":"div","label":"Div","css":{"1920":{"self":{"mask-size":"auto","mask-repeat":"repeat","-webkit-mask-size":"auto"}}},"text":{},"attributes":{},"classes":{},"conditions":{},"properties":{},"Target":null}],"symbol":null,"order":100,"loop":1,"name":"div","label":"Border Rotating","attributes":{},"classes":{},"conditions":{},"properties":{},"text":{},"css":{"480":{"self":{}},"1920":{" *":{"top":"0","left":"0","width":"100%","height":"100%","position":"absolute"},"self":{"top":"50%","left":"50%","width":"calc(100% + 6px)","opacity":"0%","position":"absolute","transform":"translate(-50%, -50%)","transition":"opacity 1s","-ms-transform":"translate(-50%, -50%)","-webkit-transform":"translate(-50%, -50%)","-webkit-transition":"opacity 1s"},"::after":{"clear":"both","content":"\"\"","display":"block"},"::before":{"float":"left","content":"\"\"","padding-top":"100%"}}},"Target":null}],"symbol":null,"order":100,"loop":1,"name":"a","label":"Primary Button 60","attributes":{"1":{"link-type":"url"},"1707329675184023-1":{"page-id":1711640428204001,"link-type":"page"},"1707776565828014-1":{"page-id":1711640428204001,"link-type":"page"},"1709561376134013-1":{"page-id":1711640428204001,"link-type":"page"},"1709924246665020-1":{"page-id":1711640428204001,"link-type":"page"}},"classes":{"1":[]},"conditions":{},"properties":{},"text":{"1":"Explore Templates"},"css":{"480":{"self":{"margin-left":"auto","margin-right":"auto"}},"1920":{"self":{"display":"flex","overflow":"hidden","position":"relative","min-width":"207px","padding-top":"1px","padding-left":"1px","border-radius":"12px","padding-right":"1px","padding-bottom":"1px"},":hover > div":{"opacity":"0.6"},":hover .overlay-2":{"opacity":"0%"}}},"Target":null}