in

Clickable link for css button

Hi,

I've added a custon css button to my site using the HTML widget. Everything has worked fine however I would like the button to link through to my portfolio page.

I've tried but it isn't working.

The HTML code is:

PORTFOLIO

And the CSS:

u/import url(« https://fonts.googleapis.com/css?family=Roboto« );

.preserve-3d {

transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

}

body {

padding: 0;

margin: 0;

border: 0;

overflow-x: none;

background-color: #ffffff;

font-family: Roboto, sans-serif;

weig

letter-spacing: 1.75

font-size: 12px;

font-smooth: always;

-webkit-font-smoothing: antialiased;

}

.back:before {

content: counter(bc) « _ »;

position: absolute;

padding: 10px;

}

u/media screen and (max-width: 1260px) {

.back {

width: 50%;

}

}

u/media screen and (max-width: 840px) {

.back {

width: 100%;

}

}

.button_base {

margin: 0;

border: 0;

font-size: 18px;

position: relative;

top: 50%;

left: 50%;

margin-top: -25px;

margin-left: -100px;

width: 200px;

height: 50px;

text-align: center;

box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-user-select: none;

cursor: default;

}

.button_base:hover {

cursor: pointer;

}

.b12_3d_glitch {

overflow: hidden;

width: 200px;

height: 51px;

}

.b12_3d_glitch div {

padding: 10px;

position: absolute;

text-align: center;

box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

width: 200px;

height: 50px;

}

.b12_3d_glitch div:nth-child(1) {

background-color: #ffffff;

top: 1px;

left: 0px;

border: #000000 solid 1px;

}

.b12_3d_glitch div:nth-child(2) {

color: #000000;

left: -100px;

top: 2px;

width: 400px;

height: 50px;

}

.b12_3d_glitch:hover div:nth-child(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-fill-mode: forwards;

-webkit-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

}

.b12_3d_glitch:hover div:nth-child(2) {

color: #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-fill-mode: forwards;

-webkit-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=)

repeat;

}

u/-webkit-keyframes b12_3d_glitch_bg {

49.00% {

background-color: #ffffff;

}

50.00% {

background-color: #000000;

}

to {

background-color: #000000;

}

}

u/-webkit-keyframes b12_3d_glitch {

from {

transform: skewX(0deg);

-webkit-transform: skewX(0deg);

-moz-transform: skewX(0deg);

color: #000000;

}

25.00% {

transform: skewX(80deg);

-webkit-transform: skewX(80deg);

-moz-transform: skewX(80deg);

color: #000000;

}

75.00% {

transform: skewX(-20deg);

-webkit-transform: skewX(-20deg);

-moz-transform: skewX(-20deg);

color: #ffffff;

}

90.00% {

transform: skewX(0deg);

-webkit-transform: skewX(0deg);

-moz-transform: skewX(0deg);

color: #ffffff;

}

to {

transform: skewX(0deg);

-webkit-transform: skewX(0deg);

-moz-transform: skewX(0deg);

color: #ffffff;

}

}

u/-moz-keyframes b12_3d_glitch_bg {

49.00% {

background-color: #ffffff;

}

50.00% {

background-color: #000000;

}

to {

background-color: #000000;

}

}

u/-moz-keyframes b12_3d_glitch {

from {

transform: skewX(0deg);

-webkit-transform: skewX(0deg);

-moz-transform: skewX(0deg);

color: #000000;

}

25.00% {

transform: skewX(80deg);

-webkit-transform: skewX(80deg);

-moz-transform: skewX(80deg);

color: #000000;

}

75.00% {

transform: skewX(-20deg);

-webkit-transform: skewX(-20deg);

-moz-transform: skewX(-20deg);

color: #ffffff;

}

90.00% {

transform: skewX(0deg);

-webkit-transform: skewX(0deg);

-moz-transform: skewX(0deg);

color: #ffffff;

}

to {

transform: skewX(0deg);

-webkit-transform: skewX(0deg);

-moz-transform: skewX(0deg);

color: #ffffff;

}

}

Written by Odikadoo

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

ELementor Pro Support to respond?

Specify PHP file for File Upload within Elementor Form Widget?