Bom dia queia deixar essa seta igual como esta na imagem mas nao consegui queria saber como faz pra deixar igual como esta ai na imagem me ajudem
Bom dia queia deixar essa seta igual como esta na imagem mas nao consegui queria saber como faz pra deixar igual como esta ai na imagem me ajudem
Oi, Robson. Tudo bem?
Fiz um modelo simples usando position para poder deixar a imagem em uma posição similar ao modelo do figma. Vou deixar o código e a imagem do resultado logo abaixo:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button>COMECE AGORA<img src="./seta.png" alt=""></button>
</div>
</body>
</html>
CSS:
:root {
--fundo-tela: #FFE7D1;
--fundo-botao: #ED4D1B;
--fonte: #000;
}
div {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 400px;
background-color: var(--fundo-tela);
}
button {
position: relative;
width: 200px;
height: 48px;
border: none;
border: 2px solid black;
background-color: var(--fundo-botao);
color: var(--fonte);
font-weight: bold;
font-size: 20px;
box-shadow: 3px 3px 0px 0px rgba(0,0,0,1);
}
img {
position: absolute;
top: 75px;
left: 120px;
}
Você pode usar as propriedades top e left para modificar a posição da seta em relação ao botão. A <div> com o display: flex; é apenas para posicionar o modelo no centro do exemplo, ela pode não fazer sentido no seu projeto.
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)