handyandmarvelous

Worked perfectly! Thank you so much!

Greetings! Can you also provide the code to change the font (to the custom font) in the navigation button? Thank you!

@tuanphan Unfortunately that didn't work.

@tuanphan the link worked just fine. Thank you!

@tuanphan Thank you. Can I delay the color change by a second or ease it in?

@tuanphan #c8a47e Also, is there a page on your website where I can leave a tip? You are always so helpful with everyone in the forum. You're very appreciated.

Also, is there a page on beaverhero.com where I can leave a tip?

#c8a47e

Thank you so very much! Is there code to change the color of the text within the button on hover? https://brianthomaslawblueprint.squarespace.com/ Password: Strat3gy I'm currently using this markdown block: <button class="button"> Areas of Practice <div class="button__horizontal"></div> <div class="button__vertical"></div> </button> <style> .button { --offset: 7px; --border-size: 1.5px; display: block; position: relative; padding: .5em 1em; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: transparent; color: #000000; text-transform: uppercase; letter-spacing: .1em; outline: none; cursor: pointer; font-weight: normal; font-family: orpheus pro !; border-radius: 0; box-shadow: inset 0 0 0 var(--border-size) currentcolor; transition: background 0.8s ease; } .button:hover { background: #997799; } .button__horizontal, .button__vertical { position: absolute; top: var(--horizontal-offset, 0); right: var(--vertical-offset, 0); bottom: var(--horizontal-offset, 0); left: var(--vertical-offset, 0); transition: transform 0.8s ease; will-change: transform; } .button__horizontal::before, .button__vertical::before { content: ""; position: absolute; border: inherit; } .button__horizontal { --vertical-offset: calc(var(--offset) * -1); border-top: var(--border-size) solid currentcolor; border-bottom: var(--border-size) solid currentcolor; } .button__horizontal::before { top: calc(var(--vertical-offset) - var(--border-size)); bottom: calc(var(--vertical-offset) - var(--border-size)); left: calc(var(--vertical-offset) * -1); right: calc(var(--vertical-offset) * -1); } .button:hover .button__horizontal { transform: scaleX(0); } .button__vertical { --horizontal-offset: calc(var(--offset) * -1); border-left: var(--border-size) solid currentcolor; border-right: var(--border-size) solid currentcolor; } .button__vertical::before { top: calc(var(--horizontal-offset) * -1); bottom: calc(var(--horizontal-offset) * -1); left: calc(var(--horizontal-offset) - var(--border-size)); right: calc(var(--horizontal-offset) - var(--border-size)); } .button:hover .button__vertical { transform: scaleY(0); } </style>

Thank you! Would you be able to assist with converting this Codepen so that I can use the animation use on my Squarespace site? https://codepen.io/handyandmarvelous/pen/PMGWKo/9bae05fbcc597facf42983e3d6404bd2

Thank you so much for this! Can you tell me how to change the font on this button animation to Orpheus Pro? I tried adding font-type but it was ineffective.

@tuanphan Could you please assist with the code to add this pen to my site: https://codepen.io/electerious/pen/qPjbGm Thank you!

My apologies. I pasted the wrong link. But the first one works marvelously, thank you. Here is the correct link:https://codepen.io/handyandmarvelous/pen/PMGWKo/9bae05fbcc597facf42983e3d6404bd2

@tuanphan Could you please help me with the code for this pen? https://codepen.io/handyandmarvelous/pen/yLpxgXb/d5e679dc1c0575eb7fdac1cbfaea27c5

I tried this with the "Read On" button here without success. Any suggestions?