Rolls by Click on Skill Name

So, I see that the D&D 5e sheet has the ability to click on skill names and cause the roll to happen. I've looked at that sheet's HTML, and can't figure out how they made that work (getting a button to function is straightforward, but I can't determine how they got the actual text of the skill to be the field to click on to cause the roll).  Anyone understand how to get that functionality?

It's easy than you'd think. You just need to set up the button something like this <button class="button-roll" type="roll" name="roll_MySkill" value="/roll 1d20+6">         <span class="button-text">My Skill</span> </button> Then in the CSS, do something like this button[type=roll].sheet-button-roll {     background-image: none;     background-color: transparent; /* if you want to have the text appear in the center of the button */     width: 100%;     text-align: center; } And this is the important bit, to hide the existing die image button[type=roll].sheet-button-roll::before {      background-image: none;     content: ""; } That should be about it.

That works perfectly, thank you! (I did add some extra formatting to the font, but you gave me the base of what I needed, which worked exactly how I wanted.)

Yay! I avoided giving too much formatting because that obscures what you really need to know.

If you're still around, is there a way to create these buttons with an input field. As an example, could I create a 'button' where the player can type the name in. I have a couple fields that allow for customization (a 'custom' crafting profession, for example, or weapon names) that it would be nice to have a roll button for where they click on the name of the thing. It seems like this isn't possible, but I just want to check.

It is possible to type a name in an have it appear on the button. But it has to be handled differently. You cant type a name in on the button directly, because the button will register that as a click and try to roll. Most sheets that do this handle it by having two different modes: an edit mode, and a normal mode. When you activate edit mode, it swaps the button with an input, letting you enter the name. Then switching back to normal mode, you have the button. This works because spans can be given an attribute name (name="attr_something"), and if you give the span and input the same name, whatever you type in the input will appear on the span.  So the above button would be something like <button class="button-roll" type="roll" name="roll_MySkill" value="/roll 1d20+6">         <span class="button-text" name="attr_this_skill"></span> </button> and have an input with the same name somewhere else, where you enter the text you want to appear.