Scrolling Text to Button

Description

• change scrolling text block to button style
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, add a Scrolling Block, something like this

#1.2. Hover on Page where you use Scrolling Block > Click Gear icon

#1.3. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c01v13(v2) Scrolling Text to Button -->
<style>
  div.sc-item span {
    background-color: #000;
    color: #fff;
    padding: 5px 20px;
    border-radius: 50px;
}
</style>
<script>
window.ScrollingColorsConfig = {
  pixelsPerSecondPerUnit: 50,
  spinnerSize: 36,
  spinnerThickness: 4,
  spinnerColor: "#888888",
  spinnerTrackColor: "rgba(0,0,0,0.12)"
};
</script>
<script src="https://code.beaverhero.com/scrollblock/0726c01v13scrolldifferentcolor.js"></script>

#1.4. You can change button text color, button background here

background-color: #000;
    color: #fff;

#2. Customize

#2.1. To set different button color, change this code

  div.sc-item span {
    background-color: #000;
    color: #fff;
    padding: 5px 20px;
    border-radius: 50px;
}

to something like this

div.sc-item span {
    background-color: #000;
    color: #fff;
    padding: 5px 20px;
    border-radius: 50px;
}
div.sc-item:nth-child(2n+1) span {
    background-color: #f1f
}

result

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block under Scrolling Block

Then add this code into Markdown Block

<style>
  div.sc-item span {
    background-color: #000;
    color: #fff;
    padding: 5px 20px;
    border-radius: 50px;
}
</style>
<script>
window.ScrollingColorsConfig = {
  pixelsPerSecondPerUnit: 50,
  spinnerSize: 36,
  spinnerThickness: 4,
  spinnerColor: "#888888",
  spinnerTrackColor: "rgba(0,0,0,0.12)"
};
</script>
<script src="https://code.beaverhero.com/scrollblock/0726c01v13scrolldifferentcolor.js"></script>