Creating A Fancy Button Widget - Cyberpunk Glitch Button

Creating A Fancy Button Widget - Cyberpunk Glitch Button

In this article, we will explain step by step how to create and configure a button from scratch.

1- Create the Widget From Widgets Section

Open Cinema8 Admin Panel
  1. Select Tools Menu 
  2. Select 8 Widgets Link





  1. Select  + New Widget Button




  1. Give a name to your widget
  2. Select Active for Widget Status to access it from the creative studio
  3. Select Template Type (BUTTON)
  4. Set the default Position on the video when you first add the widget to the video
  5. Press Create button to save the widget




  1. Navigate to widgets section
  2. Open the menu in the right panel of the newly created widget
  3. Select Edit 




2-Edit Widget Content to create brand new button.

  1. Open the properties panel and add related properties to the widget




  1. Add HTML, CSS, and Javascript codes to your widget
  2. Press the update button to save your widget.
  3. You can preview the widget at the bottom of the page



HTML Code 


  1. <div class="container-{{uid}}">
      <button class="btn-{{uid}}">{{text}}</button>
    </div>

CSS Code



  1. .btn-{{uid}}, .btn-{{uid}}::after {
      width: 100%;
      height: 100%;
      font-size: {{fontSize}}rem;
      font-family: 'Bebas Neue', cursive;
      background: linear-gradient(45deg, transparent 5%, {{bgcolour}} 5%);
      border: 0;
      color: {{textColour}};
      letter-spacing: 3px;
      line-height: 88px;
      box-shadow: 6px 0px 0px {{boxShadow}};
      outline: transparent;
      position: relative;
    }

    .btn-{{uid}}::after {
      --slice-0: inset(50% 50% 50% 50%);
      --slice-1: inset(80% -6px 0 0);
      --slice-2: inset(50% -6px 30% 0);
      --slice-3: inset(10% -6px 85% 0);
      --slice-4: inset(40% -6px 43% 0);
      --slice-5: inset(80% -6px 5% 0);
      
      content: '{{text}}';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 3%, {{boxShadow}} 3%, {{boxShadow}} 5%, {{bgcolour}} 5%);
      text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px {{boxShadow}};
      clip-path: var(--slice-0);
    }

    .btn-{{uid}}:hover::after {
      animation: 1s glitch-{{uid}};
      animation-timing-function: steps(2, end);
    }

    @keyframes glitch-{{uid}} {
      0% {
        clip-path: var(--slice-1);
        transform: translate(-20px, -10px);
      }
      10% {
        clip-path: var(--slice-3);
        transform: translate(10px, 10px);
      }
      20% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 10px);
      }
      30% {
        clip-path: var(--slice-3);
        transform: translate(0px, 5px);
      }
      40% {
        clip-path: var(--slice-2);
        transform: translate(-5px, 0px);
      }
      50% {
        clip-path: var(--slice-3);
        transform: translate(5px, 0px);
      }
      60% {
        clip-path: var(--slice-4);
        transform: translate(5px, 10px);
      }
      70% {
        clip-path: var(--slice-2);
        transform: translate(-10px, 10px);
      }
      80% {
        clip-path: var(--slice-5);
        transform: translate(20px, -10px);
      }
      90% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 0px);
      }
      100% {
        clip-path: var(--slice-1);
        transform: translate(0);
      }
    }

Now you can find the newly created widget inside the creative studio and add this widget to your videos.
All the properties we defined in the above steps will be accessible in the creative studio and allow you to use them in your other videos by changing the button's properties.

See the widget in action



    • Related Articles

    • Widget API

      Widgets are key expansion points of any cinema8 interactive video. While You can use any widget from the widget library you can also develop your own customized widgets with the C8 Widget Development environment. This article  walks you through the  ...
    • Widget Development playground

      The following sample video contains the codes that exemplify the methods, property types and usage scenarios used in the widget development environment. . Playground Video Defined Properties for playground  Cinema8 widget playground properties ...
    • Studio Development - Using Variables

      Cinema8 creative studio allows you to develop video interactions without writing code with drag-and-drop tools, You can still create variables in the video, fill these variables from integrations or widgets you have developed, and build algorithms ...
    • Server Side WebHooks

      A webhook (also called a web callback or HTTP push API) is a way for an app to provide other applications with real-time information. A webhook delivers data to other applications as it happens, meaning you get data immediately. Cinema8 Webhooks are ...
    • Getting started with C8 API

      Cinema8 APIs to build extensive digital experiences within your videos. Cinema8 has an extensive API to support your business and your customers’ needs while developing interactive video-based solutions. Whether you are developing a web application, ...