BLK Posted July 11, 2023 Share Posted July 11, 2023 Hi, I'm wondering if anyone is able to help me achieve these animated buttons please! https://codemyui.com/minimalistic-hover-effect-button-animations/ I would like to acheive the same effect as button 13, the code pen code is showing: .btn-13 { border: 2px solid #000; z-index: 1; } .btn-13:after { position: absolute; content: ""; width: 100%; height: 0; top: 0; left: 0; z-index: -1; background: #000; transition: all 0.3s ease; } .btn-13:hover { color: #fff; } .btn-13:hover:after { top: auto; bottom: 0; height: 100%; } .btn-13:active { top: 2px; } Thank you! Link to comment
tuanphan Posted July 15, 2023 Share Posted July 15, 2023 Add a Code Block > paste this code <button class="custom-btn btn-13">Read More</button> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> <style> .custom-btn { padding: 10px 25px; font-family: "Roboto", sans-serif; font-weight: 500; background: transparent; outline: none !important; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; } /**** BTN No. 13 ****/ .btn-13 { border: 2px solid #000; z-index: 1; } .btn-13:after { position: absolute; content: ""; width: 100%; height: 0; top: 0; left: 0; z-index: -1; background: #000; transition: all 0.3s ease; } .btn-13:hover { color: #fff; } .btn-13:hover:after { top: auto; bottom: 0; height: 100%; } .btn-13:active { top: 2px; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BLK Posted July 25, 2023 Author Share Posted July 25, 2023 Thank you so so much!! This is great. Is there any way to center the button please? currently it is to the left. Thank you!! Link to comment
BLK Posted July 25, 2023 Author Share Posted July 25, 2023 Also how do i make the buttons linked to go to different pages please? Thank you Link to comment
tuanphan Posted July 26, 2023 Share Posted July 26, 2023 14 hours ago, BLK said: Also how do i make the buttons linked to go to different pages please? Thank you Can you share link to page where you added the code? We can imagine button easier to check Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
bonesie Posted March 16 Share Posted March 16 Hey Tuan, I am also looking into style #13, however, I would like to apply it globally to ALL buttons on my site. I would still like the option to be able to change the button colors in the fluid engine editor without having to write color-specific CSS for every button on my site. Is this something that is possible? Link to comment
tuanphan Posted March 19 Share Posted March 19 On 3/17/2024 at 2:26 AM, bonesie said: Hey Tuan, I am also looking into style #13, however, I would like to apply it globally to ALL buttons on my site. I would still like the option to be able to change the button colors in the fluid engine editor without having to write color-specific CSS for every button on my site. Is this something that is possible? Each button (header button, button block, form button, newsletter button, people section button, add to cart button...) have a different structure, so you need to share site url, we can check easier Style #13. Which style are you referring to? Can you take a screenshot or share link? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Squaredspace Posted April 4 Share Posted April 4 These animated buttons are awesome. They're all great but I'm looking at how to use buttons 12-15. Doesn't look like it's a simple matter of inserting the code into the CSS block? I gave it a try and it didn't work for me. Link to comment
tuanphan Posted April 7 Share Posted April 7 On 4/5/2024 at 2:22 AM, Squaredspace said: These animated buttons are awesome. They're all great but I'm looking at how to use buttons 12-15. Doesn't look like it's a simple matter of inserting the code into the CSS block? I gave it a try and it didn't work for me. I think we can solve this with CSS, need to adjust a bit If you share link to page where you use button on your site, we can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Squaredspace Posted April 7 Share Posted April 7 (edited) The website is General 2 — kobold (squarespace.com), password is G5!6p56&46ed! Site is a work in progress (so it looks a little messy), and I'm not sure if I want to use animated buttons throughout the site or only for specific pages. Also, I'm pretty sure the code didn't work because there is another code(s) for the buttons right now. I'm relatively new to Squarespace and CSS coding, so I'm still learning the ins and outs of it all 🙂 Edited April 7 by Squaredspace Link to comment
tuanphan Posted April 9 Share Posted April 9 On 4/8/2024 at 3:32 AM, Squaredspace said: The website is General 2 — kobold (squarespace.com), password is G5!6p56&46ed! Site is a work in progress (so it looks a little messy), and I'm not sure if I want to use animated buttons throughout the site or only for specific pages. Also, I'm pretty sure the code didn't work because there is another code(s) for the buttons right now. I'm relatively new to Squarespace and CSS coding, so I'm still learning the ins and outs of it all 🙂 You mean these effects? https://codepen.io/ahmedbeheiry/pen/aBdezY https://ranunculus-fish-fhr3.squarespace.com/?noredirect Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Squaredspace Posted April 9 Share Posted April 9 Hi @tuanphan, yes, those are the 4 effects I'd like to use as button options on my website. Link to comment
tuanphan Posted April 13 Share Posted April 13 On 4/9/2024 at 10:45 PM, Squaredspace said: Hi @tuanphan, yes, those are the 4 effects I'd like to use as button options on my website. With effect 12, you try this code to bottom of Custom CSS box a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:after { position: absolute; content: ""; width: 100%; height: 0; bottom: 0; left: 0; z-index: -1; background: #000; transition: all 0.3s ease; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element { transition: all 0.3s ease; position: relative; display: flex; background-color: transparent !important; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover { color: #fff; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover:after { top: 0; height: 100%; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Squaredspace Posted April 14 Share Posted April 14 Thank you @tuanphan ! The code works in principal. Looks like I have to make some tweaks to transparency, color, etc. to make them work. What if I want to use the code only for certain buttons on certain sections or pages? Is that when I should add a code block inside a given section? I guess it's not as simple as adding a block ID or section ID to the code? I thought I could change some buttons to secondary buttons and change up the code to secondary accordingly, but that doesn't work. Sorry about asking these basic questions. Still learning the structure of how CSS coding works 🙂 Link to comment
tuanphan Posted April 16 Share Posted April 16 To apply to buttons belong a specific section, use this code [enter your data-section-id] { a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:after { position: absolute; content: ""; width: 100%; height: 0; bottom: 0; left: 0; z-index: -1; background: #000; transition: all 0.3s ease; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element { transition: all 0.3s ease; position: relative; display: flex; background-color: transparent !important; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover { color: #fff; } a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover:after { top: 0; height: 100%; } } Use this free tool to find data section id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Squaredspace Posted April 19 Share Posted April 19 This works great @tuanphan. I actually tried using the section ID code but not sure why it didn't work for me, I must have inputted incorrectly. Thank you so much for your help!! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment