Hi,
I've added a custon css button to my feature the usage of the HTML widget. All the pieces has labored just however I would cherish the button to hyperlink by means of to my portfolio web page.
I've tried however it isn't working.
The HTML code is:
And the CSS:
u/import url(« https://fonts.googleapis.com/css?family=Roboto« );
.hang-3d {
became-vogue: hang-3d;
-webkit-became-vogue: hang-3d;
}
body {
padding: 0;
margin: 0;
border: 0;
overflow-x: none;
background-coloration: #ffffff;
font-family: Roboto, sans-serif;
weig
letter-spacing: 1.75
font-size: 12px;
font-gentle: continuously;
-webkit-font-smoothing: antialiased;
}
.help:sooner than {
bid: counter(bc) « _ »;
space: absolute;
padding: 10px;
}
u/media cloak and (max-width: 1260px) {
.help {
width: 50%;
}
}
u/media cloak and (max-width: 840px) {
.help {
width: 100%;
}
}
.button_base {
margin: 0;
border: 0;
font-size: 18px;
space: relative;
high: 50%;
left: 50%;
margin-high: -25px;
margin-left: -100px;
width: 200px;
high: 50px;
textual bid-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-user-elevate: none;
cursor: default;
}
.button_base:waft {
cursor: pointer;
}
.b12_3d_glitch {
overflow: hidden;
width: 200px;
high: 51px;
}
.b12_3d_glitch div {
padding: 10px;
space: absolute;
textual bid-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 200px;
high: 50px;
}
.b12_3d_glitch div:nth-baby(1) {
background-coloration: #ffffff;
high: 1px;
left: 0px;
border: #000000 stable 1px;
}
.b12_3d_glitch div:nth-baby(2) {
coloration: #000000;
left: -100px;
high: 2px;
width: 400px;
high: 50px;
}
.b12_3d_glitch:waft div:nth-baby(1) {
animation: b12_3d_glitch_bg 0.3s linear;
-webkit-animation: b12_3d_glitch_bg 0.3s linear;
-moz-animation: b12_3d_glitch_bg 0.3s linear;
animation-contain-mode: forwards;
-webkit-animation-contain-mode: forwards;
-moz-animation-contain-mode: forwards;
}
.b12_3d_glitch:waft div:nth-baby(2) {
coloration: #000000;
animation: b12_3d_glitch 0.3s linear;
-webkit-animation: b12_3d_glitch 0.3s linear;
-moz-animation: b12_3d_glitch 0.3s linear;
animation-contain-mode: forwards;
-webkit-animation-contain-mode: forwards;
-moz-animation-contain-mode: forwards;
background: url(records:image/png;rotten64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=)
repeat;
}
u/-webkit-keyframes b12_3d_glitch_bg {
49.00% {
background-coloration: #ffffff;
}
50.00% {
background-coloration: #000000;
}
to {
background-coloration: #000000;
}
}
u/-webkit-keyframes b12_3d_glitch {
from {
became: skewX(0deg);
-webkit-became: skewX(0deg);
-moz-became: skewX(0deg);
coloration: #000000;
}
25.00% {
became: skewX(80deg);
-webkit-became: skewX(80deg);
-moz-became: skewX(80deg);
coloration: #000000;
}
75.00% {
became: skewX(-20deg);
-webkit-became: skewX(-20deg);
-moz-became: skewX(-20deg);
coloration: #ffffff;
}
90.00% {
became: skewX(0deg);
-webkit-became: skewX(0deg);
-moz-became: skewX(0deg);
coloration: #ffffff;
}
to {
became: skewX(0deg);
-webkit-became: skewX(0deg);
-moz-became: skewX(0deg);
coloration: #ffffff;
}
}
u/-moz-keyframes b12_3d_glitch_bg {
49.00% {
background-coloration: #ffffff;
}
50.00% {
background-coloration: #000000;
}
to {
background-coloration: #000000;
}
}
u/-moz-keyframes b12_3d_glitch {
from {
became: skewX(0deg);
-webkit-became: skewX(0deg);
-moz-became: skewX(0deg);
coloration: #000000;
}
25.00% {
became: skewX(80deg);
-webkit-became: skewX(80deg);
-moz-became: skewX(80deg);
coloration: #000000;
}
75.00% {
became: skewX(-20deg);
-webkit-became: skewX(-20deg);
-moz-became: skewX(-20deg);
coloration: #ffffff;
}
90.00% {
became: skewX(0deg);
-webkit-became: skewX(0deg);
-moz-became: skewX(0deg);
coloration: #ffffff;
}
to {
became: skewX(0deg);
-webkit-became: skewX(0deg);
-moz-became: skewX(0deg);
coloration: #ffffff;
}
}
