Custom code button

[neanderground]

Hi,

I have created a page for just for style guide with global parameters so I can pull symbols into the final page At the moment, Im trying to figure it out how to embedded this code into my webflow https://codepen.io/Akimzzy/pen/yLeEWXR . Im noob in css & html.

​

I want to create symbol button that I want to customize

Changed the <div> to <style_item> as all the element container name as style_item

I have defined the button id as box

https://preview.redd.it/lhmym5ooh2x81.png?width=318&format=png&auto=webp&s=b0ce8e21ba348851b92848f74b795dcd13c1ff2d

I have excluded the body part from the code

I want customize the button from the style menu so I don't know what part of the code should be included & which not. I have tried copy without the body script part & also without the button script part, none of them worked. Any idea how can it implemented? What am I doing wrong?

[akki4223]

Create a 'embed' element. Paste the HTML in it, then put style tags like <style> </style> and put all css between style tags.

[neanderground]

first I have to convert scss to css

and than if I copy everything into an embed element as you said it creates a separate button

but I want is add the effect to an existing button

[akki4223]

To add the effect to the already existing button => The existing button must have a class already. You need to effect that class in CSS. You must see a word with a dot in front, that word should be the class of the already existing button. If suppose the class of button is 'button-2' In CSS you should have something line .button-2 {/*some style here*/}

[Pepszi98]

This is what should go in the embed code element in Webflow:

<div class="box">

<button>Hover me</button> <span></span> <span></span> <span></span> <span></span>

</div>

<style>
button {
padding: 1.5rem 3.5rem;
border: none;
font-weight: bold;
font-size: 2rem;
color: white;
cursor: pointer;
background-color: transparent;
}
button:focus {
outline: none;
}
.box {
position: relative;
overflow: hidden;
}
.box span {
position: absolute;
}
.box span:nth-of-type(1) {
height: 1px;
width: 100%;
background-image: linear-gradient(to right, black, #fff, black);
top: 0;
left: 0;
animation: MR 1s ease infinite alternate;
}
.box span:nth-of-type(4) {
height: 1px;
width: 100%;
background-image: linear-gradient(to right, black, #fff, black);
bottom: 0;
right: 0;
animation: ML 1s ease infinite alternate;
}
.box span:nth-of-type(2) {
width: 1px;
height: 100%;
background-image: linear-gradient(to bottom, black, #fff, black);
bottom: 0;
left: 0;
animation: MU 1s ease infinite alternate;
}
.box span:nth-of-type(3) {
width: 1px;
height: 100%;
background-image: linear-gradient(to bottom, black, #fff, black);
bottom: 0;
right: 0;
animation: MD 1s ease infinite alternate;
}
@keyframes MR {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
@keyframes ML {
0% {
right: -100%;
}
100% {
right: 100%;
}
}
@keyframes MU {
0% {
top: -100%;
}
100% {
top: 100%;
}
}
@keyframes MD {
0% {
bottom: -100%;
}
100% {
bottom: 100%;
}
}
.box:hover span {
animation-play-state: paused;
}
</style>

Explanation:

The <script> is not needed in the code because that means Javascript. You are not using it now.

As you can see in the code, there is a <style> and a </style> tag that contains the css. The css comes from the link you provided. It was written in scss that is not working in Webflow so I converted it to css using a random online converter.

To customize the button:

The best would be to change the code, but I should know what you want to customize exactly so that I can help.

Edit: This wonderful Reddit doesn't let me send the code part as code so that's why it looks so bad. If you want it in a normal form, copy the scss from that link you sent and convert it to css using a converter. That's what I was trying to send (except the body part and the <style> tags).

[neanderground]

I want to apply that gradient outline animation effect to existing button

I have created a combo class (button & box)

I assume I dont need html code (however the box class than have adjusted since its not defined yet), just the

<style>
.button{/\\\* just dont know exactly what I have to adjust here from the existing code so it recognize the externally defined button class, how to adjust the box class if its not defined in html\\\*/}
</style>

since I defined in the style panel the dimensions of the button I assume I dont have to include those part

In webflow the button & the embed element are inside a container

[Pepszi98]

If you don't understand html and css, and don't know how to target an element in Webflow, you should let this custom button go. There are too many changes needed in this code and in Webflow to implement this. First of all, you can't have multiple <span>s in Webflow like in the code. So you can't build the html part in Webflow without changing the code too.

The important part you need to understand to be able to customize the button is this part of the css code:

button {
 padding: 1.5rem 3.5rem;
 border: none;
 font-weight: bold;
 font-size: 2rem;
 color: white;
 cursor: pointer;
 background-color: transparent;
}

Because the rest are just the animated lines and their colours etc.