Created
October 29, 2023 19:45
-
-
Save MogulChris/cd18bc103b7100e0ecfd79f21284c1de to your computer and use it in GitHub Desktop.
CSS border image notes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>title</title> | |
| <style> | |
| button { | |
| appearance: none; | |
| background-color: transparent; | |
| text-align: center; | |
| padding: 30px 50px; | |
| /* | |
| The image is an svg of the desired fancy button, perhaps with complicated borders including angles and gaps. | |
| The key rule here is border-image-slice. | |
| https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice | |
| This rule says how to divide up the image to use as a border - top, right, bottom, left | |
| These values will need to change depending on the image, but the idea is to slice at the appropriate points | |
| so your image tiles nicely in the middle section, to allow for a variable amount of button label text | |
| */ | |
| border-image: url(fancy-button.svg); | |
| border-image-slice: 50% 20% 50% 10%; | |
| border-image-width: auto; | |
| border-image-repeat: repeat; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button>Click here to add more text, it can go really long if needed</button> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment