Login

Effect button

Preview demo
Desktop
Mobile

Effect button brizy cloud only css


This content has been hidden.

Please Donate or Complete Survey (advertisement) to unlock free.

Download demo

button style 1


.wtr-bnt_slyle1 > * {
  z-index: 1;
}
.wtr-bnt_slyle1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  right: 5px;
  bottom: 20px;
  border-radius: inherit;
  border: 3px solid transparent;
  background: -moz-linear-gradient(45deg,red,blue,red,blue) border-box;
  background: -webkit-linear-gradient(45deg,red,blue,red,blue) border-box;
  background: linear-gradient(45deg,red,blue,red,blue) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  -webkit-mask-composite: source-out;
  mask-composite: exclude;
  background-size: 300% 300%;
  -webkit-animation: 4s infinite alternate animatedgradient;
  animation: 4s infinite alternate animatedgradient;
}
@keyframes animatedgradient{
 0%,100%{background-position:0 50%}
 50%{background-position:100% 50%}
}



button style 2


.wtr-bnt_slyle2 > * {
  z-index: 1;
}
.wtr-bnt_slyle2::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -2px;
  right: -2px;
  bottom: 14px;
  border-radius: inherit;
  border: 3px solid transparent;
  background: -moz-linear-gradient(45deg,red,blue,red,blue) border-box;
  background: -webkit-linear-gradient(45deg,red,blue,red,blue) border-box;
  background: linear-gradient(45deg,red,blue,red,blue) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  -webkit-mask-composite: source-out;
  mask-composite: exclude;
  background-size: 300% 300%;
  -webkit-animation: 4s infinite alternate animatedgradient;
  animation: 4s infinite alternate animatedgradient;
}
@keyframes animatedgradient{
 0%,100%{background-position:0 50%}
 50%{background-position:100% 50%}
}


button style 3


.wtr-bnt_slyle3 > * {
  z-index: 1;
}
.wtr-bnt_slyle3::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -2px;
  right: -2px;
  bottom: 14px;
  border-radius: inherit;
  border: 3px solid transparent;
  background: -moz-linear-gradient(45deg, rgba(255,0,0,1) 25%, rgba(4,0,255,1) 45%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 70%, rgba(255,0,0,1) 100%) border-box;
  background: -webkit-linear-gradient(45deg, rgba(255,0,0,1) 25%, rgba(4,0,255,1) 45%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 70%, rgba(255,0,0,1) 100%) border-box;
  background: linear-gradient(45deg, rgba(255,0,0,1) 25%, rgba(4,0,255,1) 45%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 70%, rgba(255,0,0,1) 100%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  -webkit-mask-composite: source-out;
  mask-composite: exclude;
  background-size: 300% 200%;
}
.wtr-bnt_slyle3:hover::after {
  -webkit-animation: 4s infinite alternate animatedgradient;
  animation: 4s infinite alternate animatedgradient;
}
@keyframes animatedgradient{
 0%,100%{background-position:0 50%}
 50%{background-position:100% 50%}
}
Download demo

How to use it

Download file demo.zip, upload to Brizy. Done (Then you can see the css code from here)

  1. Click download demo.zip
  2. To import, go to a page >> click on "add a new block" >> select "saved" tab >> click on "import new block" >> Upload your zip file >> Completed.
  3. Customize to your fancy. Watch the video tutorial here

*Note: License Pro is required for the functions to work

Key word:

CSS Button Hover Effects, Button Effects

$3

Published by Philip

Future update

Lifetime support

Live chat - Setup support

Compatible with BrizyCloud & WP

Join premium membership to unlock all pages (no ads)