Estoy intentando que quede un background de partículas hecho con un script de javascript, html y css de fondo (background), y que encima de este quede un botón que he hecho en el medio. El problema es que no consigo ajustar las dos cosas para que quede como quiero; efecto partículas de background con botón en el medio que daría inicio a la página principal. Aquí el código:
PARTÍCULAS (html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Particulas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="particles-js"></div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
PARTÍCULAS (CSS):
body{
margin: 0;
padding: 0;
height: 100vh;
}
#particles-js{
height: 100%;
background: #000000;
}
HTML (BOTÓN):
<!DOCTYPE html>
<html>
<head>
<title>Boton Inicial</title>
<link rel="stylesheet" type="text/css" href="start.css">
</head>
<body>
<a href="">
<span></span>
<span></span>
<span></span>
<span></span>
START WITH US
</a>
</body>
</html>
BOTÓN (CSS):
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031321;
font-family: consolas;
}
a{
position: relative;
display: inline-block;
padding: 15px 30px;
color: #2196f3;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
overflow: hidden;
transition: 0.2s;
}
a:hover{
color: #255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
transition-delay: 1s;
}
a span{
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#2196f3);
}
a:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#2196f3);
}
a:hover span:nth-child(3) {
left: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#2196f3);
}
a:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#2196f3);
}
a:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
Entiendo, que hay que acabar juntándolo todo de alguna manera, pero no lo he conseguido, he buscado por internet pero tampoco encuentro respuesta... ¡Si alguien me pudiera ayudar le estaría super agradecido! =)
¡Muchísimas gracias! =)
body
, intenta agregando a tu css:height: 100vh
en los estilos debody
– Samuel Sobalvarro el 23 abr. 20 a las 22:21