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
Creating A Fancy Button Widget - Cyberpunk Glitch Button




  1. Select  + New Widget Button
Creating A Fancy Button Widget - Cyberpunk Glitch 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
Creating A Fancy Button Widget - Cyberpunk Glitch Button



  1. Navigate to widgets section
  2. Open the menu in the right panel of the newly created widget
  3. Select Edit 
Creating A Fancy Button Widget - Cyberpunk Glitch Button



2-Edit Widget Content to create brand new button.

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

Creating A Fancy Button Widget - Cyberpunk Glitch Button



  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
Creating A Fancy Button Widget - Cyberpunk Glitch Button
Creating A Fancy Button Widget - Cyberpunk Glitch Button


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.
Creating A Fancy Button Widget - Cyberpunk Glitch Button

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 HTML Code <div class='c-{{uid}}'> <div ...
    • 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 ...
    • WebSocket API

      WebSocket powered widget development The WebSocket api within Cinema8 widget development environment allows you to create real-time communication and collaboration tools for your interactive videos. By leveraging websockets, you can create ...
    • 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 ...