JSFiddle - React, Tailwind, and code Playground

HTML

<form action="submit.php" method="post" id="buttonSettings">
  <input type="text" name="button_background_color" placeholder="Background Color">
</form>

<a href="#" class="button-style-one">Button</a>

CSS

.button-style-one {
  background-color: red;
  color: white;
  padding: 10px 20px;
  font-family: helvetica;
  text-decoration: none;
  border-radius: 3px;
  display: inline-block;
  margin-top: 20px;
}

JavaScript

$(document).ready(function() {

  $('input').blur(function() {
    var inputName = $(this).attr("name");
    updateCSS(inputName, 'button-style-one', 'background-color');
  })

  // Function to update CSS
  function updateCSS(pInputNameAttribute, pElementClass, pCssProperty) {
    var inputName = '[name=' + pInputNameAttribute + ']',
      elementClass = '.' + pElementClass,
      inputValue = $(inputName).val();

    $(elementClass).css({
      pCssProperty: inputValue
    });
  }
});