Leverage JavaScript or CSS to create a paper button without the ink effect

Question

Leverage JavaScript or CSS to create a paper button without the ink effect

Currently, I am utilizing JavaScript to dynamically create paper-buttons in the following manner:

function createButtons(dieDefaults) {
for(var i = 0; i < dieDefaults.length; i++) {
    var btn = document.createElement("paper-button");

    var txt = document.createTextNode(dieDefaults[i]);
    btn.className += "smallButton";
    btn.onclick = function() {
        document.getElementById("sidesInput").value = this.firstChild.nodeValue;
        checkInput(btn);
    }
    btn.appendChild(txt);
    document.getElementById("dieDefaultDiv").appendChild(btn);
}
}

When I create a paper-button using

var btn = document.createElement("paper-button");

, I am unsure how to include noink or raised. I am open to using CSS for styling, however, including --paper-button-raised: true; within:

  paper-button{
color: var(--paper-blue-grey-100);
background: var(--paper-indigo-500);
--paper-button-raised: true;}

has not been effective. Any suggestions on how to address this?

javascript css polymer polymer-1.0

Answer 1

Answer №1

To apply the properties noink and raised to the btn element, you can do it like this:

btn.noink = true;
btn.raised = true;

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <script>
    HTMLImports.whenReady(function() {
      var btn = document.createElement('paper-button');
      btn.textContent = 'Hello';
      btn.noink = true;
      btn.raised = true;
      btn.onclick = function() {
        console.log('clicked');
      };
      document.body.appendChild(btn);
    });
  </script>
</body>

Answer 2

To apply the properties noink and raised to the btn element, you can do it like this:

btn.noink = true;
btn.raised = true;

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <script>
    HTMLImports.whenReady(function() {
      var btn = document.createElement('paper-button');
      btn.textContent = 'Hello';
      btn.noink = true;
      btn.raised = true;
      btn.onclick = function() {
        console.log('clicked');
      };
      document.body.appendChild(btn);
    });
  </script>
</body>

Leverage JavaScript or CSS to create a paper button without the ink effect

Answer №1

Similar questions

Is it possible to use Selenium IDE to navigate if a variable contains a specific string

Equal Sized <li> elements within Bootstrap Cards

PhantomJS 2.0.0 not delaying page loading

Tips for passing navigator reference to React Native's <Drawer/> component?

Attempting to modify information in vue.js

|Webview|Best Practices for Integrating Upload Script

Ways to showcase a location on a map

Issue with MVC 4 Asynchronous File Upload: Controller Always Receiving Null Value

Sass: Overcoming the challenge of the IE limitation on 4095 selectors per stylesheet

What steps can I take to stop the comments section on my WordPress website from taking up the entire screen?

What is the best way to generate a new div element when the content exceeds the preset height of the current div?

What is the best way to align a series of divs vertically within columns?

What is the best way to send JSON data from Express to a JavaScript/jQuery script within a Pug template?

Is there a way to connect a function to a div using anchor tags that mimic a dropdown menu?

Integrating redux-form with the react-widgets DateTimePicker component

Customizing the arrow of a Bootstrap tooltip and adjusting its positioning

The authentication0 router fails to initiate navigation

placeholder for dropdown selection in Vue.js version 2.0.0

Bringing the Jquery cursor into focus following the addition of an emoji

Utilizing Dojo widgets in Xpages