How do I make a cool custom button

[Rubbereon]

I wanted to redesign my site, but give it more of my spice, make it better reflect my personality as an oddball cartoon fanatic furry, so I wanted my links to be buttons and the buttons to be bubbles. I found a helpful tutorial using the border property to make a good-looking outer layer, but now I want a glossy effect inside the buttons too.

This website is kind of what I'm trying to reproduce, well at least the buttons, but Kiophen uses png files for the buttons, I also considered maybe using svg which's what inkscape on linux for, so it's not like I'm out of options, but I'm not exactly familiar with svg it's just too different from bitmap formats.

[GideonWilhelm]

If I recall, it's easy to just export an SVG as a PNG or other bitmap format.  This might be something I fiddle with on the weekend, but I digress.  My first instinct is to open the inspector, and I find in the style editor (at least that's what firefox calls it, just the CSS) it looks like inline style sheet #2 has the jiggle animation when opening the navlinks, as well as some of the info about the navlinks class.  My go-to would be to copy some of those entries and play with them, see how close I can get to the reference.  It's how I rebuilt my page, I used vertpush as a reference to get the basics down

[Rubbereon]

If I recall, it's easy to just export an SVG as a PNG or other bitmap format.  My first instinct is to open the inspector, and I find in the style editor...  My go-to would be to copy some of those entries and play with them, see how close I can get to the reference.  It's how I rebuilt my page, I used vertpush as a reference to get the basics down

I tried to do what you suggested, but I couldn't find any css reference for my use case.


I'm gonna add this too because there's a small chance that I miscommunicated what I meant with "using svg" and why I said "but png...".

1. I have to bake the text directly into the png. maybe there is a hacky way to center the text inside a png, but I'm not a super big fan of that. I already had to do something weird like that for the index page to crop a jpeg and I saw someone else have a problem with displaying a scroll correctly using css on their site because 9 patch just wouldn't work right for them. they eventually figured it out, but it ended up being very hacky, like they had to set the width to 0 to get it working.
2. Svg can be embedded directly into the html code via the <svg> tag. This is why I'm considering it as an option because it is more versatile. Heck if needed, I can probasbly split the svg into multiple pieces to enclose the text in it or use the dedicated svg text element to ditrectly puit any text into the bubble.

Here's the doodle I'm using as a reference and to show what I'm trying to do with the button.


Everything else looks neat, it's the circle shine on the top left that I'm having trouble figuring out how to make.

Here's the code (in css):

Code

.bubblebox {
	border: 1rem solid black; 
	border-radius: 50% 50% 50% 50% / 66% 66% 33% 33%; 
	border-right-width: 0; 
	border-left-width: 0;
	background-color: white;
	box-shadow: 0 0 5px gray inset;
	display: table;
	padding: 20px;
}