Guest Posted May 20, 2020 Share Posted May 20, 2020 Site URL: https://octahedron-plantain-seg7.squarespace.com/ For my home page, I have a full page image. I want to have an arrow at the bottom to show people to scroll down. If I can find a way to have the arrow bouncing that would be good, but I can't find how to get an arrow at the bottom of the screen. Any help? Website password: "morrill" Link to comment
tuanphan Posted May 25, 2020 Share Posted May 25, 2020 (edited) Add Code Block with this code <div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> </div> <style> .mouse { margin: 50px auto; width: 100px; } .mouse-icon { width: 25px; height: 45px; border: 2px solid white; /*you can change 'white' to a hex color*/ border-radius: 15px; cursor: pointer; position: relative; text-align: center; } .mouse-wheel { height: 6px; margin: 2px auto 0; display: block; width: 3px; background-color: white; /*you can change 'white' to a hex color*/ border-radius: 50%; -webkit-animation: 1.6s ease infinite wheel-up-down; -moz-animation: 1.6s ease infinite wheel-up-down; animation: 1.6s ease infinite wheel-up-down; } @-webkit-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } @-moz-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } }@keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } </style> Edited May 25, 2020 by tuanphan MartinMurray 1 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
Heidi2020 Posted May 26, 2020 Share Posted May 26, 2020 (edited) Hey tuanphan, it doesn't seem to be an arrow. I have a round box with 2 lines going down ... ? Edited May 26, 2020 by Heidi2020 Link to comment
tuanphan Posted May 27, 2020 Share Posted May 27, 2020 Yes. You want a simple down arrow? On 5/26/2020 at 5:47 PM, Heidi2020 said: Hey tuanphan, it doesn't seem to be an arrow. I have a round box with 2 lines going down ... ? 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
Heidi2020 Posted May 27, 2020 Share Posted May 27, 2020 (edited) 1 hour ago, tuanphan said: Yes. You want a simple down arrow? i managed to make the arrow bounce...initially wanted to have gooye scroll down arrow from codepen - https://codepen.io/flik185/pen/WxwLdX , but none of the codes from the webpage work ...should there be extra codes to use codepen codes in squarespace? And is it possible to have 2 arrows just like that to use for a gallery? Like going right and left? thank you so much! Edited May 27, 2020 by Heidi2020 Link to comment
tuanphan Posted May 28, 2020 Share Posted May 28, 2020 22 hours ago, Heidi2020 said: i managed to make the arrow bounce...initially wanted to have gooye scroll down arrow from codepen - https://codepen.io/flik185/pen/WxwLdX , but none of the codes from the webpage work ...should there be extra codes to use codepen codes in squarespace? And is it possible to have 2 arrows just like that to use for a gallery? Like going right and left? thank you so much! Which code did you insert to your site? Codepen link above use SCSS, you need to convert to CSS It will be (Add to Code Block) <div class="ico animated"> <div class="circle circle-top"></div> <div class="circle circle-main"></div> <div class="circle circle-bottom"></div> <svg class="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve" > <defs> <clipPath id="cut-off-arrow"> <circle cx="306" cy="306" r="287"/> </clipPath> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> <feBlend in="SourceGraphic" in2="goo" /> </filter> </defs> <path class="st-arrow" d="M317.5,487.6c0.3-0.3,0.4-0.7,0.7-1.1l112.6-112.6c6.3-6.3,6.3-16.5,0-22.7c-6.3-6.3-16.5-6.3-22.7,0 l-86,86V136.1c0-8.9-7.3-16.2-16.2-16.2c-8.9,0-16.2,7.3-16.2,16.2v301.1l-86-86c-6.3-6.3-16.5-6.3-22.7,0 c-6.3,6.3-6.3,16.5,0,22.7l112.7,112.7c0.3,0.3,0.4,0.7,0.7,1c0.5,0.5,1.2,0.5,1.7,0.9c1.7,1.4,3.6,2.3,5.6,2.9 c0.8,0.2,1.5,0.4,2.3,0.4C308.8,492.6,313.8,491.3,317.5,487.6z"/> </svg> </div> <style> .ico { margin: 0 auto; text-align: center; width: 100px; height: 100px; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-filter: url("#goo"); filter: url("#goo"); } .ico .circle { background: #fff; border-radius: 50%; display: inline-block; height: 100px; width: 100px; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform-origin: 0%; transform-origin: 0%; } .ico .circle.circle-top { height: 33.3333333333px; width: 41.6666666667px; -webkit-animation: blob-1-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite; animation: blob-1-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite; z-index: 0; top: 0; } .ico .circle.circle-bottom { height: 33.3333333333px; width: 41.6666666667px; -webkit-animation: blob-2-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite; animation: blob-2-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite; z-index: 9; bottom: 0px; } .ico .st-arrow { fill: #55544F; -webkit-animation: scrolly 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite; animation: scrolly 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite; -webkit-perspective: 9000px; perspective: 9000px; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transform-origin: bottom; transform-origin: bottom; } .svg { z-index: 9; position: relative; } @-webkit-keyframes blob-1-anim { 0% { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } 14% { -webkit-transform: translateX(-50%) translateY(-8px); transform: translateX(-50%) translateY(-8px); } 24% { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } 100% { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } } @keyframes blob-1-anim { 0% { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } 14% { -webkit-transform: translateX(-50%) translateY(-8px); transform: translateX(-50%) translateY(-8px); } 24% { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } 100% { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } } @-webkit-keyframes blob-2-anim { 0% { -webkit-transform: scale(1) translate(-50%, 10px); transform: scale(1) translate(-50%, 10px); } 30% { -webkit-transform: scale(1) translate(-50%, 10px); transform: scale(1) translate(-50%, 10px); } 70% { -webkit-transform: scale(1) translate(-50%, 10px); transform: scale(1) translate(-50%, 10px); } 95% { -webkit-transform: scale(1) translate(-50%, 26px); transform: scale(1) translate(-50%, 26px); } 100% { -webkit-transform: scale(1) translate(-50%, 10px); transform: scale(1) translate(-50%, 10px); } } @keyframes blob-2-anim { 0% { -webkit-transform: scale(1) translate(-50%, 10px); transform: scale(1) translate(-50%, 10px); } 30% { -webkit-transform: scale(1) translate(-50%, 10px); transform: scale(1) translate(-50%, 10px); } 70% { -webkit-transform: scale(1) translate(-50%, 10px); transform: scale(1) translate(-50%, 10px); } 95% { -webkit-transform: scale(1) translate(-50%, 26px); transform: scale(1) translate(-50%, 26px); } 100% { -webkit-transform: scale(1) translate(-50%, 10px); transform: scale(1) translate(-50%, 10px); } } @-webkit-keyframes scrolly { 0% { -webkit-transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg); transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg); } 30% { -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg); transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg); } 70% { -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg); transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg); } 95% { -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg); transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg); } 100% { -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg); transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg); } } @keyframes scrolly { 0% { -webkit-transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg); transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg); } 30% { -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg); transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg); } 70% { -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg); transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg); } 95% { -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg); transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg); } 100% { -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg); transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg); } } </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
Guest Posted July 16, 2020 Share Posted July 16, 2020 This works but how do we make a clickable? Also when you click on the arrow, I want it to scroll down... Link to comment
tuanphan Posted July 16, 2020 Share Posted July 16, 2020 7 hours ago, saira757 said: This works but how do we make a clickable? Also when you click on the arrow, I want it to scroll down... Can you share link to your site? I 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
rwp Posted July 17, 2020 Share Posted July 17, 2020 jQuery (add script, directions in my signature) $(document).ready(function() { $('.ico.animated').on('click', function() { $('html,body').animate({ scrollTop: $('.page-section:nth-child(2)').offset().top - $('#header').height() }, 1000); }); }); CSS .ico.animated { cursor: pointer; } Link to comment
michael_bates Posted July 21, 2020 Share Posted July 21, 2020 Hi, I too am just wanting a simple 'scroll' down arrow on my squarespace 7.1 site on various pages. There used to be an option to have a scroll down icon on squarespace 7.0. Can anyone help with CSS for this? Michael Link to comment
MartinMurray Posted April 27, 2021 Share Posted April 27, 2021 On 5/25/2020 at 10:10 AM, tuanphan said: Add Code Block with this code <div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> </div> <style> .mouse { margin: 50px auto; width: 100px; } .mouse-icon { width: 25px; height: 45px; border: 2px solid white; /*you can change 'white' to a hex color*/ border-radius: 15px; cursor: pointer; position: relative; text-align: center; } .mouse-wheel { height: 6px; margin: 2px auto 0; display: block; width: 3px; background-color: white; /*you can change 'white' to a hex color*/ border-radius: 50%; -webkit-animation: 1.6s ease infinite wheel-up-down; -moz-animation: 1.6s ease infinite wheel-up-down; animation: 1.6s ease infinite wheel-up-down; } @-webkit-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } @-moz-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } }@keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } </style> This is brilliant 🙂 but when I add it into a banner header it seems to be forced black regardless of hex or colour you write in the code is there a fix for this? The template seems to force it to remain black? For example - http://partnerships.autotrader.co.uk/hyundai-e-suv Your Martin Link to comment
MartinMurray Posted April 27, 2021 Share Posted April 27, 2021 1 hour ago, MartinMurray said: This is brilliant 🙂 but when I add it into a banner header it seems to be forced black regardless of hex or colour you write in the code is there a fix for this? The template seems to force it to remain black? For example - http://partnerships.autotrader.co.uk/hyundai-e-suv Fixed 😄 tuanphan 1 Your Martin Link to comment
LoneSpruce Posted April 29, 2021 Share Posted April 29, 2021 On 5/25/2020 at 5:10 AM, tuanphan said: Add Code Block with this code <div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> </div> <style> .mouse { margin: 50px auto; width: 100px; } .mouse-icon { width: 25px; height: 45px; border: 2px solid white; /*you can change 'white' to a hex color*/ border-radius: 15px; cursor: pointer; position: relative; text-align: center; } .mouse-wheel { height: 6px; margin: 2px auto 0; display: block; width: 3px; background-color: white; /*you can change 'white' to a hex color*/ border-radius: 50%; -webkit-animation: 1.6s ease infinite wheel-up-down; -moz-animation: 1.6s ease infinite wheel-up-down; animation: 1.6s ease infinite wheel-up-down; } @-webkit-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } @-moz-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } }@keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } </style> Love this! Is there a way to delay it showing up on the home page for a second or two? Link to comment
GlennieS Posted November 6, 2021 Share Posted November 6, 2021 On 5/25/2020 at 7:10 PM, tuanphan said: Add Code Block with this code <div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> </div> <style> .mouse { margin: 50px auto; width: 100px; } .mouse-icon { width: 25px; height: 45px; border: 2px solid white; /*you can change 'white' to a hex color*/ border-radius: 15px; cursor: pointer; position: relative; text-align: center; } .mouse-wheel { height: 6px; margin: 2px auto 0; display: block; width: 3px; background-color: white; /*you can change 'white' to a hex color*/ border-radius: 50%; -webkit-animation: 1.6s ease infinite wheel-up-down; -moz-animation: 1.6s ease infinite wheel-up-down; animation: 1.6s ease infinite wheel-up-down; } @-webkit-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } @-moz-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } }@keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } </style> I like this but the icon is not centred in the code block. I want to add text below saying Scroll down. So they need to line up. Hope you can help. Link to comment
tuanphan Posted November 7, 2021 Share Posted November 7, 2021 19 hours ago, GlennieS said: On 5/25/2020 at 4:10 PM, tuanphan said: Add Code Block with this code <div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> </div> <style> .mouse { margin: 50px auto; width: 100px; } .mouse-icon { width: 25px; height: 45px; border: 2px solid white; /*you can change 'white' to a hex color*/ border-radius: 15px; cursor: pointer; position: relative; text-align: center; } .mouse-wheel { height: 6px; margin: 2px auto 0; display: block; width: 3px; background-color: white; /*you can change 'white' to a hex color*/ border-radius: 50%; -webkit-animation: 1.6s ease infinite wheel-up-down; -moz-animation: 1.6s ease infinite wheel-up-down; animation: 1.6s ease infinite wheel-up-down; } @-webkit-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } @-moz-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } }@keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } </style> I like this but the icon is not centred in the code block. I want to add text below saying Scroll down. So they need to line up. Hope you can help. Can you share link to page where you added icon? 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
Outlast-Creative Posted December 17, 2021 Share Posted December 17, 2021 Can you please amend this code for me please so that it has the animated icon and text on the same line and not one after another? <div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> </div> <style> .mouse { width: 100px; } .mouse-icon { width: 18px; height: 30px; border: 2px solid white; /*you can change 'white' to a hex color*/ border-radius: 15px; cursor: pointer; position: relative; text-align: center; } .mouse-wheel { height: 6px; margin: 2px auto 0; display: block; width: 3px; background-color: white; /*you can change 'white' to a hex color*/ border-radius: 50%; -webkit-animation: 1.6s ease infinite wheel-up-down; -moz-animation: 1.6s ease infinite wheel-up-down; animation: 1.6s ease infinite wheel-up-down; } @-webkit-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } @-moz-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } }@keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } </style> <br> Scroll down to find out more Link to comment
tuanphan Posted December 19, 2021 Share Posted December 19, 2021 On 12/18/2021 at 5:07 AM, Outlast-Creative said: Can you please amend this code for me please so that it has the animated icon and text on the same line and not one after another? <div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> </div> <style> .mouse { width: 100px; } .mouse-icon { width: 18px; height: 30px; border: 2px solid white; /*you can change 'white' to a hex color*/ border-radius: 15px; cursor: pointer; position: relative; text-align: center; } .mouse-wheel { height: 6px; margin: 2px auto 0; display: block; width: 3px; background-color: white; /*you can change 'white' to a hex color*/ border-radius: 50%; -webkit-animation: 1.6s ease infinite wheel-up-down; -moz-animation: 1.6s ease infinite wheel-up-down; animation: 1.6s ease infinite wheel-up-down; } @-webkit-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } @-moz-keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } }@keyframes wheel-up-down { 0% { margin-top: 2px; opacity: 0; } 30% { opacity: 1; } 100% { margin-top: 20px; opacity: 0; } } </style> <br> Scroll down to find out more Try edit this code <div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> </div> to this <div class="mouse"> <div class="mouse-icon"> <span class="mouse-wheel"></span> </div> <span>Add text here</span> </div> 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
Outlast-Creative Posted December 21, 2021 Share Posted December 21, 2021 @tuanphan Thanks for the reply Tuanphan your help is much appreciated. I don't think this worked for me though. I've attached an image of what I'm seeing. Link to comment
tuanphan Posted December 25, 2021 Share Posted December 25, 2021 On 12/21/2021 at 7:35 AM, Outlast-Creative said: @tuanphan Thanks for the reply Tuanphan your help is much appreciated. I don't think this worked for me though. I've attached an image of what I'm seeing. Can you share link to page where you added the code? I can test code 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
HG-Design Posted April 14, 2022 Share Posted April 14, 2022 (edited) Hi Tuanphan, Is it possible to move the mouse icon to the bottom of the the photo we have overlayed it on? http://wvcharge.squarespace.com Thank you Edited April 14, 2022 by HG-Design Link to comment
tuanphan Posted April 18, 2022 Share Posted April 18, 2022 On 4/15/2022 at 2:55 AM, HG-Design said: Hi Tuanphan, Is it possible to move the mouse icon to the bottom of the the photo we have overlayed it on? http://wvcharge.squarespace.com Thank you It looks like you solved with this code? #page .page-section:first-of-type:after { font-family: squarespace-ui-font; content: "\E009"; border: 4px solid #FF6C0E; border-radius: 50%; font-size: 37px; text-align: center; line-height: 40px; height: 40px; width: 40px; position: absolute; bottom: 15px; left: 50%; transform: translatex(-50%) !important; display: block; opacity: 1; transition: all ease .5; } 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
HG-Design Posted April 18, 2022 Share Posted April 18, 2022 17 minutes ago, tuanphan said: It looks like you solved with this code? #page .page-section:first-of-type:after { font-family: squarespace-ui-font; content: "\E009"; border: 4px solid #FF6C0E; border-radius: 50%; font-size: 37px; text-align: center; line-height: 40px; height: 40px; width: 40px; position: absolute; bottom: 15px; left: 50%; transform: translatex(-50%) !important; display: block; opacity: 1; transition: all ease .5; } Hi Tuanphan I went with that code in the end as could work out how to move the mouse. If you do have the code to move the mouse animation to the same position as where I now have the arrow and circle that would be great however no issue if not as the arrow looks ok where it is now. Thank you, Joe Link to comment
tuanphan Posted April 19, 2022 Share Posted April 19, 2022 20 hours ago, HG-Design said: Hi Tuanphan I went with that code in the end as could work out how to move the mouse. If you do have the code to move the mouse animation to the same position as where I now have the arrow and circle that would be great however no issue if not as the arrow looks ok where it is now. Thank you, Joe Hi, You want Mouse animation add circle around arrow (It looks like you solved this?) Is this right? 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
HG-Design Posted April 19, 2022 Share Posted April 19, 2022 Hi, I ideally what the mouse icon but in the same position as where the arrow/circle are currently position on our homepage. Thank you, Joe 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