Title: Button Style (Value)
Last modified: January 11, 2025

---

# Button Style (Value)

 *  Resolved [eberkland](https://wordpress.org/support/users/eberkland/)
 * (@eberkland)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/button-style-value/)
 * I need to style the “value” in the button settings. It looks like it doesn’t 
   accept html. I am trying to add an icon. I have tried with font-awesome, google
   material symbols, svg. Usually, this method works, but I am not having any luck
   with CFF. Here is an example:
 *     ```wp-block-code
       #fbuilder .deletebtn input[type=button] {    display: inline-block;    width: 100%;    text-decoration: none;    font-size: 14px;    line-height: 2;    min-height: 34px;    padding: 5px 30px;    cursor: pointer;    border-width: 1px;    border-style: solid;    -webkit-appearance: none;    border-radius: 3px;    white-space: nowrap;    box-sizing: border-box;    vertical-align: baseline;    background: #007cba;    border-color: #007cba;    color: #fff;    text-shadow: none;    position: relative; /* Required for pseudo-element positioning */}#fbuilder .deletebtn input[type=button]::before {    content: '';    display: inline-block;    width: 16px; /* Icon width */    height: 16px; /* Icon height */    margin-right: 8px; /* Space between icon and text */    vertical-align: middle;    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24" width="24" height="24"%3E%3Cpath d="M3 6h18v2H3V6zm2 3h14v13H5V9zm4 3v7h2v-7H9zm4 0v7h2v-7h-2zM7 4h10v2H7V4z"/%3E%3C/svg%3E') no-repeat center;    background-size: contain; /* Ensures the SVG scales properly */}
       ```
   

Viewing 1 replies (of 1 total)

 *  Plugin Author [CodePeople2](https://wordpress.org/support/users/codepeople2/)
 * (@codepeople2)
 * [1 year, 4 months ago](https://wordpress.org/support/topic/button-style-value/#post-18238417)
 * Hello [@eberkland](https://wordpress.org/support/users/eberkland/)
 * You cannot use `::before` if the tag does not have the structure `<tag></tag>`,
   so, you cannot apply it to a `<input>` tag.
 * If you want to create a button with a custom structure and design, you must enter
   its tags directly in the content of an “HTML Content” field, and in this case,
   you can insert the button as `<button type="button">The text</button>`
 * Best regards.

Viewing 1 replies (of 1 total)

The topic ‘Button Style (Value)’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

## Tags

 * [button styling](https://wordpress.org/support/topic-tag/button-styling/)

 * 1 reply
 * 2 participants
 * Last reply from: [CodePeople2](https://wordpress.org/support/users/codepeople2/)
 * Last activity: [1 year, 4 months ago](https://wordpress.org/support/topic/button-style-value/#post-18238417)
 * Status: resolved