:root {
  --normal:  #0b6ec0, #00d4ff;
  --hover:   #00d4ff, #0b6ec0;
  --pressed: #99eeff, #9fd1f9;
}

html {
	height: 100%;
	background: url(https://zubiaingenieros.com/wp-content/themes/zubia2014/images/slide_1.jpg) 50%/ cover #212121;
	background-blend-mode: multiply;
}

a {
	--img: linear-gradient(to right bottom, var(--normal));
	
	min-width: 10em;
	padding: 1em .2em;
	
	border: solid .25em;
	
	border-image: var(--img) 1;
	border-radius: 0.9em;
	
	background: var(--img) border-box;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	
	text-transform: uppercase;
	font: 700 2em/ 1.25 ubuntu, sans-serif;

	&::after { content: attr(data-ico) }
}

a:hover {
	--img: linear-gradient(to right bottom, var(--hover));
}

a:pressed {
	--img: linear-gradient(to right bottom, var(--pressed));
}


/*
button {
	--img: linear-gradient(to right bottom, var(--normal));
	
	min-width: 10em;
	padding: 1em 1.5em;
	
	border: solid .25em;
	
	border-image: var(--img) 1;
	border-radius: 0.9em;
	
	background: var(--img) border-box;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	
	text-transform: uppercase;
	font: 700 2em/ 1.25 ubuntu, sans-serif;

	&::after { content: attr(data-ico) }
}

button:hover {
	--img: linear-gradient(to right bottom, var(--hover));
}

button:pressed {
	--img: linear-gradient(to right bottom, var(--pressed));
}
*/