How ?
- Use Accordion element
- Set ID name Accordion: calls-action-cta (any name)
- Change TEXT >> 💬
- Add some css code
- Stick the call to action button
How ?
CODE
#menu-lienhe .brz-accordion__item.brz-accordion__item--active .brz-accordion__nav-title {
display: none!important;
}
#menu-lienhe .brz-accordion__item:not(.brz-accordion__item--active) .brz-accordion--icon-wrapper {
display: none!important;
}
#menu-lienhe .brz-accordion--icon-wrapper {
margin: 0!important;
}
#menu-lienhe .brz-accordion__item {
width: fit-content!important;
}
/* shine */
#menu-lienhe .brz-accordion__item:not(.brz-accordion__item--active)::before {
content: "";
height: 60px;
aspect-ratio: 1 / 1;
position: absolute;
top: -1px;
left: -1px;
-webkit-box-shadow: 0 0 0 0 rgb(255 180 0);
box-shadow: 0 0 0 0 rgb(255 180 0);
background-color: rgba(255, 180, 0, 0.4);
border-radius: 100%;
-webkit-animation: wtr-zoomIn 1.3s infinite;
animation: wtr-zoomIn 1.3s infinite;
z-index: -1;
}
@-webkit-keyframes wtr-zoomIn {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
70% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-box-shadow: 0 0 0 15px transparent;
box-shadow: 0 0 0 15px transparent;
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-box-shadow: 0 0 0 0 transparent;
box-shadow: 0 0 0 0 transparent;
}
}
@keyframes wtr-zoomIn {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
70% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-box-shadow: 0 0 0 15px transparent;
box-shadow: 0 0 0 15px transparent;
}
100% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-box-shadow: 0 0 0 0 transparent;
box-shadow: 0 0 0 0 transparent;
}
}
How to use it
Download file demo.zip, upload to Brizy. Done (Then you can see the css code from here)
*Note: License Pro is required for the functions to work
Key word:
button calls-to-action (CTA)
