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;
}

[Dan Q]

I had a go at making that something like that button using HTML + CSS only. Here's my HTML (I added lots of bubbles so I could be sure it'd cope with a variety of different "sizes" of bubbles:

Code

<p>
  <a href="#" class="bubblebox">
    Here
  </a>

  <a href="#" class="bubblebox">
    Are
  </a>

  <a href="#" class="bubblebox">
    My
  </a>

  <a href="#" class="bubblebox">
    Bubbles!
  </a>
</p>

<p>
  <a href="#" class="bubblebox">
    This bubble has lots of text so it's bigger!
  </a>

  <a href="#" class="bubblebox">
    This bubble has text<br>
    across two lines!
  </a>
</p>

Then I wrote this CSS. I started with yours, basically (so I hope you were happy with those border-radiuses!). I've added LOTS of comments to explain everything I did. Key points are:

- I put the bubble thickness and color into CSS variables.
- This meant that I could derive the shadow color and inner circle size using CSS calculations. If you change the thickness or color, it has knock-on effects to the derived values too.
- I switched your mixture of rem and px units to just px. Using a mixture like this might throw off people who change the font size in their browser; it CAN be safe, but needs more testing... so I took the easy route and just used pixels (and percentages of container sizes, later).
- I applied a minimum width and an aspect ratio so the bubbles grow proportionally if you put extra text into them
- To do the "little circle", I used a ::after { ... } selector with content: ''; to add a 'virtual' extra element to the page. Then sized and shaped it relative to its parent (the main bubble).

Code

.bubblebox {
  /* Let's put the bubble color in a variable for easy access: */
  --bubble-color: skyblue;
  /* Derive the shadow color by making the bubble color darker: */
  /* (reduce Lightness by 10%, keep Chroma and Hue the same)*/
  --shadow-color: oklch(from var(--bubble-color) calc(l - 0.1) c h);
  /* Put the bubble "shell" width in a variable too: */
  --bubble-thickness: 14px;
  /* Derive the shadow thickness from it (half as thick): */
  --shadow-thickness: calc(var(--bubble-thickness) / 2);
  /* Derive the little circle in the same way: */
  --little-circle-thickness: calc(var(--bubble-thickness) / 3);
  
  /* Display inline, but sizeable: */
  display: inline-block;
  /* Give them a bubbly border: */
  border: solid var(--bubble-color);
  border-width: var(--bubble-thickness) 0; /* (switched rem to px to not mix-units!) */
  border-radius: 50% 50% 50% 50% / 66% 66% 33% 33%; 
  /* White BG with inner shadow: */
  background-color: white;
  box-shadow: 0 0 var(--shadow-thickness) var(--shadow-color) inset;
  /* Always at least 125px wide, and 4/7ths as tall as wide: */
  /* (i.e. 71px tall, but taller if needed to retain proportions) */
  min-width: 125px;
  aspect-ratio: 7/4;
  /* Align the contents to the center */
  text-align: center;
  align-content: center;
  /* Move the text down JUST a little to keep it clear of the little circle (0.95%) and put some padding (equal to the bubble thickness) on the sides so "long" text doesn't burst out of the sides of the bubble: */
  padding: 0.95% var(--bubble-thickness);
  /* Position the "little circle" relative to THIS: */
  position: relative;
  
  /* For the little circle, add a virtual extra element: */
  &::after {
    /* No "content" to this extra element: */
    content: '';
    /* BUT it gets a border a bit like the parent: */
    border: solid var(--bubble-color);
    border-width: var(--little-circle-thickness) 0; /* (switched rem to px to not mix-units!) */
    border-radius: 50% 50% 50% 50% / 66% 66% 33% 33%;
    /* Give it a size relative to its container: */
    /* (little circle is 20% width of the bubble at 8% height)*/
    width: 20%;
    height: 8%;
    /* And gets positioned in the right place: */
    /* (10% from the top of the bubble, 25% from its left) */
    position: absolute;
    top: 10%;
    left: 25%;
  }
}

Here's how it looks:

I've thrown the result onto this Everyone Page if you want to try it.