Guest Posted August 20, 2020 Share Posted August 20, 2020 Site URL: https://chiton-dandelion-6p2j.squarespace.com/ Hello, New Squarespace user. I would like to have all my buttons like option number 13 (sliced button) on this page: https://webdeasy.de/en/top-css-buttons-en/ The code I'm looking to apply is this one (CSS): body { background-color: #ff8a80; font-family: 'Fjalla One', sans-serif; text-transform: uppercase; height: 95vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*--Button Styles--*/ .btn-slice { padding: 1.2rem 2.5rem; border: 2px solid #ffffff; border-radius: 0rem; color: #ffffff; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.3rem; position: relative; -webkit-transition: all 1000ms cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */ -webkit-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */ } .btn-slice .top { position: relative; height: 6px; overflow: hidden; top: 0; -webkit-transition: all 300ms cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */ -webkit-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */ -webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */ -webkit-transition-delay:0.35s; -moz-transition-delay::0.35s; -ms-transition-delay::0.35s; -o-transition-delay::0.35s; transition-delay::0.35s; } .btn-slice .bottom { position: relative; height: 6px; overflow: hidden; bottom: 0; -webkit-transition: all 300ms cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */ -webkit-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */ -webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.025, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); /* custom */ -webkit-transition-delay:0.35s; -moz-transition-delay::0.35s; -ms-transition-delay::0.35s; -o-transition-delay::0.35s; transition-delay::0.35s; } .btn-slice .bottom span { top: -6px; position: absolute; left: 0; } .btn-slice:hover .top { top: -5px; -webkit-transition-delay:0.35s; -moz-transition-delay::0.35s; -ms-transition-delay::0.35s; -o-transition-delay::0.35s; transition-delay::0.35s; } .btn-slice:hover .bottom { bottom: -5px; -webkit-transition-delay:0.35s; -moz-transition-delay::0.35s; -ms-transition-delay::0.35s; -o-transition-delay::0.35s; transition-delay::0.35s; } .btn-slice:hover, .btn-slice:focus, .btn-slice:active { margin-left: 10px; } .btn-slice:before{ content: ''; height: 1px; width: 60px; background-color: #ffffff; position: absolute; margin-top: 6px; right: -35px; -webkit-transition: all 1000ms cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */ -webkit-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.890, 0, 0.140, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); /* custom */ } .btn-slice:hover:before{ width: 130%; } Can anyone guide me on how to do this? Or point me out to a guide that shows this? Thanks Resources Link to comment
Nick_SquareKicker Posted August 21, 2020 Share Posted August 21, 2020 Hi @Colo14 you may be interested to know that my team and I are developing a Squarespace Design Extension that will give you control to customise buttons like this without writing a line of code. It comes out later this year, 2020 but you can sign up to get notified when it’s live at SquareKicker.com Hi, I'm Nick, CEO & Co-Founder at squarekicker.com. Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. Tutorials ● News ● Inspiration ● Features ● FAQS 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