Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Apply Css code to all the buttons


Colo14

Question

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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

  • 0

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

Nick Ippolito
Founder at SquareKicker

With SquareKicker say goodbye to copy & paste Squarespace plugins. Customize your Squarespace website with this full control design and animation extension. SquareKicker is a no-code solution for custom design on Squarespace websites. Unleash your creativity and design the way you always wanted. 

THE ULTIMATE SIDEKICK FOR YOUR SQUARESPACE WEBSITE
Until now, Squarespace websites have typically been made with either their pre-made templates or complex code. SquareKicker takes the simplicity and elegance of creating beautiful websites on Squarespace while seamlessly integrating the power for designers to build customizations without needing to write a single line of code. There has never been a design tool that allows so much flexibility!

Get started for free at SquareKicker.com

SquareKicker Mockup Background Color.png

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...