jblpropel Posted February 24 Share Posted February 24 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; } Link to comment
Mdhanjal Posted February 25 Share Posted February 25 share site url pls? Hi, I'm BITTU. A website developer with 8 years experience with Squarespace. if you need help and work with me email me here :- mandeepsquarespace@gmail.com Best Hourly Rate :- $15 Per Hour Link to comment
jblpropel Posted February 26 Author Share Posted February 26 magiclandharrison.squarespace.com Link to comment
creedon Posted February 26 Share Posted February 26 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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
jblpropel Posted February 28 Author Share Posted February 28 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. Link to comment
creedon Posted February 28 Share Posted February 28 Let's start with the basic cloud button effect. cloud button example.mp4 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. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
jblpropel Posted March 1 Author Share Posted March 1 That worked perfect!! Thank you. Now, how do I get the words to center in the middle of the image (button) with bottom alignment? Link to comment
creedon Posted March 1 Share Posted March 1 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? jblpropel 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! 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