Jump to content

Adding a Dashed line around a Button

Recommended Posts

Site URL: https://pomegranate-badger-p3wd.squarespace.com/

I'm trying to add a dashed border around a button via custom CSS.  

Here is the code I have so far, 

.button-block .sqs-block-button-element {
	color: black !important;
	border: 2.22px dashed #000000 !important;
  	padding: 10px 44px !important;

Currently, there are too many dashes, and I'm trying to "space" them out more.  I'm trying to increase the length of each individual dash, please see attached. 

Would anyone know how to adjust this?  changing the border: 2.22px isn't working, just makes the line thicker (and I'm trying to keep the same thinest of each dash). 

Screen Shot 2021-08-02 at 8.21.53 PM.png

Edited by zzlogan
adding edits
Link to comment

This is one of those questions where the answer should be simple, but CSS doesn't give you control over the spacing between the dots/dashes. Which means that any answer that gets you exactly what you want can become more than a little complex...

First option here is that you can fake the border with a background-image. Look here and there's a generator someone wrote on codepen  that will help you get something you want. you can then just copy the css it outputs into your button css. there's also a lot of fancy options available here too, including animating stuff etc.

More Control Over CSS Borders With background-image | CSS-Tricks


However, you might notice that CSS actually uses a different algorithm to draw a dashed border, i.e. it will always draw L shapes at every corner and then make sure that the corners have the right dash length, which this background image approach doesn't do. 

So if you want to be pixel perfect that makes things a little trickier too. if you want to do that you have to build a background image and then slice it up into 9 squares using the css border-image properties. it's tricky to be honest, but it can be done. 

try this for example:

.button-block .sqs-block-button-element {
border-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAyNyIgd2lkdGg9IjI3IiBoZWlnaHQ9IjI3Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48cGF0aCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIGQ9Ik0gMCAwIEwgNiAwIDYgMyAzIDMgMyA2IDAgNiBaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PHBhdGggIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgZD0iTSAwIDIxIEwgMCAyNyA2IDI3IDYgMjQgMyAyNCAzIDIxIFoiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cGF0aCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIGQ9Ik0gMjcgMjEgTCAyNyAyNyAyMSAyNyAyMSAyNCAyNCAyNCAyNCAyMSBaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PHBhdGggc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIiBkPSJNIDIxIDAgTCAyNyAwIDI3IDYgMjQgNiAyNCAzIDIxIDMgWiIgZmlsbD0iYmxhY2siIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgeD0iMTAuNSIgeT0iMCIgd2lkdGg9IjYiIGhlaWdodD0iMyIgZmlsbD0iYmxhY2siIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgeD0iMTAuNSIgeT0iMjQiIHdpZHRoPSI2IiBoZWlnaHQ9IjMiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cmVjdCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIHg9IjAiIHk9IjEwLjUiIHdpZHRoPSIzIiBoZWlnaHQ9IjYiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cmVjdCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIHg9IjI0IiB5PSIxMC41IiB3aWR0aD0iMyIgaGVpZ2h0PSI2IiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PC9zdmc+") 6 / 8px / 10px round;

I generated the SVG image its using as a background, but haven't made it up as a reusable codepen yet to allow you to generate one.

I think you'll be fine with the first option, but when I get time I'll make up the border-image one as a codepen and post the answer here

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

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

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.