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. @import url(' https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
   
   
   
   .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 Widget Element to learn how to use widgets inside interactive videos.

See the widget in action

Click to see the widget page

See how you can add and configure widget variables using Widget API.

• 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 ...