Button CSS with drag to enlarge feature

Hey Forum, I have a client that wants cloud buttons, I've uploaded the image in Manage Custom Files and sized it properly. However, when I go into a page and edit the page, as I try to drag and drop (to make the button bigger or smaller) the image does not adjust.

How do I add CSS so that the cloud button can be made bigger or smaller with drag and drop (when editing) and for mobile? Here is the code block I'm using:

.sqs-block-button .sqs-block-button-element--medium {    background-size: cover; width: 145px !important;    background-color: transparent !important;    background-image: url("https://static1.squarespace.com/static/63f63f087faed7328848a0f9/t/63f93a473b92ab032bfa4e47/1677277767327/Button+Color+%281%29.png");  background-size: 145px 75px;    background-repeat: no-repeat;    background-position: center;    color: gray;    }
.sqs-block-button .sqs-block-button-element--medium:hover {    color: #CDB0EE;    background-color: white; 
  } 
.sqs-block-button .sqs-block-button-element--medium {  font-family: georgia;    color: #9191ED;    font-size: 16px;    letter-spacing: 0.5em;    line-height: 35px;  
}

share site url pls?

magiclandharrison.squarespace.com

Your site is private please set up a site-wide password.

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.

Thanks! 

Password is Harrison

I need CSS help to make the text within the button wider (less padding) and to be able to drag to increase or decrease the cloud buttons on the home page.

Let's start with the basic cloud button effect.

Here is the CSS for that.

.sqs-block-button {

  background-image : url( 'https://static1.squarespace.com/static/63f63f087faed7328848a0f9/t/63f93a473b92ab032bfa4e47/1677277767327/Button+Color+%281%29.png' );
  background-position : center;
  background-repeat : no-repeat;
  background-size : contain;
  
  }

I tied it to the button block but you can choose a deeper element in the block.

Once you have that sorted then you can build on it.

Let us know how it goes.

That worked perfect!! Thank you.

Now, how do I get the words to center in the middle of the image (button) with bottom alignment? 

Quote

Now, how do I get the words to center in the middle of the image (button) with bottom alignment?

I don't have a solution for this issue.

@tuanphan Do you have an insight?