Need help adding left and right arrows to a button

Hello all! I'm trying to add two buttons at the bottom of the page signifying going onto the next or back to another case study in a portfolio. I found the CSS for the right arrow and it currently looks like Bakery Redesign pic with this code: 

.sqs-block-button-element:after {
    content: '➔';
    color: #00000 !important;
    padding-left: 30px;
    margin:10px 10px 10px 10px;
}

But I also need another button that looks the same but with the left arrow(EatUnbound). Anyone have any idea how? Also the css applies to all the buttons I put onto the site now, is there a way to only affect these buttons?

Thanks!

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

→ (alt 26)
← (alt 27)

-- didn't know it could be done via css. i've been adding directly to buttons. thx 🙂

share your site url pls?

Hello all! My url is https://brendaweicai.com and the site is currently public. The issue shown in the screenshots are here https://www.brendaweicai.com/classfindr at the very bottom of the page. 

Thanks for the tips @creedon!

Because you are using button blocks and not some collection type that provides it's own back/forward navigation elements (not that there is one that would fit your needs), there is no way from the button block code to know which one is which.

The only CSS way to overcome this is to specify each button id so the CSS knows where to place the arrows.

/* next buttons */

#block-yui_3_17_2_1_1689892764837_8954 .sqs-block-button-element::after,
#block-yui_3_17_2_1_1689952372864_12393 .sqs-block-button-element::after

  {

    content : '\2192';
    font-size : x-large;
    margin-left : 0.25em;
    
    }

/* previous buttons */

#block-bef4acd0c7addcb87c6d .sqs-block-button-element::before

  {

    content : '\2190';
    font-size : x-large;
    margin-right : 0.25em;
    
    }

Let us know how it goes.

Thanks so much! It worked perfectly and I learned some new CSS! 

23 hours ago, creedon said:

Here is a LESS version of the code that can save some amount of repetitive typing.

// begin button block next/previous arrows, uses LESS syntax

  // next buttons
  
  #block-yui_3_17_2_1_1689892764837_8954,
  #block-yui_3_17_2_1_1689952372864_12393
  
    {
    
      .sqs-block-button-element::after {
      
        content : '\2192';
        font-size : x-large;
        margin-left : 0.25em;
        
        }
        
      }
      
  // previous buttons
  
  #block-bef4acd0c7addcb87c6d {
  
    .sqs-block-button-element::before {
    
      content : '\2190';
      font-size : x-large;
      margin-right : 0.25em;
      
      }
      
    }
    
  // end button block next/previous arrows, uses LESS syntax