make a Ubmit button of this type

Asked

Viewed 187 times

-1

I’m trying to play sites to study some html and css, I have the following code: 

* {
    margin: 0;
    padding: 0;
}

#back {
    background-image: url("back2.png");
    background-size: cover;

}

body, html {
    width: 100%;
    height: 100%;
    font-family: Arial, Tahoma, sans-serif;
}

#div_princ {
    background-color: white;
    width: 350px;
    height: 100%;
    position: relative;
}

#icon {
    position: absolute;
    top: 15px;
    left: 15px;
}

#loguin {
    position: absolute;
    top: 150px;
    left: 35px;
    align-items: center;
   
}

.caixas_input {
    font-size: 10px;
    margin: 10px 10px;
    padding-top: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    background-color:#dcdde1;
    border-radius: 5px;
    width: 250px;
    border: transparent;
    
}
input:focus {
   box-shadow: 0 0 0 0;
   outline: 0;
   border-style: solid;
   border-color: black;
}

::placeholder{ 
    color: #a8a8a8;
    font-weight: bold;
    font-size: 12px;
}

#manter_login {
    position: absolute;
    top: 160px;
    left: 10px;
}

input[type=checkbox]{
    display:none; /* Esconde os inputs */
}

label {
    cursor: pointer;
}

input[type="checkbox"] + label:before {
    border: 1px transparent;
    content: "\00a0"; /** \\ 00a0, é um código hexadecimal para um espaço sem quebra **/
    display: inline-block;
    font: 16px/1em sans-serif;
    height: 16px;
    margin: 0 .25em 0 0;
    padding:0;
    vertical-align: top;
    width: 16px;
    border-radius:4px;
    background-color: #dcdde1;
}

input[type="checkbox"]:checked + label:before {
    background: #e74c3c;
    color: #FFF;
    content: "\2713";
    text-align: center;
}

#rodape { 
    color: #a8a8a8;
    position: absolute;
    top: 400px;
}

a{
    text-decoration: none;
    font-size: 12px;
    color: #a8a8a8;
    font-weight: bold;
}

a:hover {
    color: black;
}
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">


</head>
<body id="back">    
   <div id="div_princ">
        <div id="icon">
            <input type="image" src="icone.jpg">
        </div>
        <div id="loguin">
            <h3>Insira Sua conta Riot</h3>
            <form>
                <label for="Loguin"></label>
                <input type="Loguin" placeholder="NOME DE USUARIO" class="caixas_input " required>  
                <label for="Password"></label>
                <input type="password" placeholder="SENHA" class="caixas_input " required>
                <br>
            <div id="manter_login">
                <input type="checkbox" class="checkbox" id="manterlogin"> 
                <label for="manterlogin">
                     <span style="color:#a8a8a8; font-weight: bold;">
                         Manter Loguin
                    </span>
                </label>
            </div>
            <div id="rodape">
                <a href="https://signup.br.leagueoflegends.com/pt/signup/index#/">CRIAR CONTA</a> <br>
                <a href="https://recovery.riotgames.com/pt-br?region=BR1">NÃO CONSEGUE CRIAR CONTA ?</a> <br>
                <a>V9.0.0</a>
            </div>

            </form>
        </div>
   </div>

</body>

</html>

I want to put a button like this :

inserir a descrição da imagem aqui

that when you have the mouse on it looks like this :

inserir a descrição da imagem aqui

how can I do this ?

html css css3

  • for me the 2 are equal... however, to change the style with the mouse over the element, use the pseudoclass : hover. See in your code the link example a:hover

  • how would it be to place the arrow?

  • this image is from an example I took on the net

  • If the body is unique on the page, it makes no sense to put a id in it.

  • Dude from what I understand you are trying to change the color of the button when you hover over or click, there is an effect called Hover in css, take a look at this link https://www.w3schools.com/howto/howto_css_animate_buttons.asp

2 answers

1

Don’t use a div to make one botton, especially if you don’t give semantics to her using role or aria-label

Then a div won’t have type:submit or type:button you will have to use JS, then it will not be accessible by keyboard using tab (even beyond the :hover treat also the :focus)

Then use the tag <button> same, and with CSS handle the element. First of a all: unset and then put your styles as an example below

Another thing, to make the arrow you can use a very easy trick that is a HTML Entities guy

→

Here is a list with a multitude of arrows https://www.toptal.com/designers/htmlarrows/arrows/

button {
  all: unset;
  cursor: pointer;
  font-size: 26px;
  font-weight: bold;
  width: 50px;
  height: 50px;
  background: red;
  border-radius: .5em;
  transition: background 500ms;
  display: flex;
  justify-content: center;
  align-items: center;
}
button:focus,
button:hover {
  background: brown;
}
button::after {
  content: "\2192";
  position: absolute;
  color: #fff;
}
<button type="submit"></button>

1


With CSS you can make this button and the internal arrow of it. Just use pseudo-elements ::before and ::after. One builds the arrow rod and the other the right arrow. See below the code and comments explaining what each property does. You can adjust colors and sizes as you like.

In the example below I used the tag <a>, but you can use the tag <button> if it is an Submit button. In this case (if using button), you must include two more properties: all: unset; (to remove pattern styles from the tag button, such as borders, etc.) and cursor: pointer; (to apply the link icon to the mouse cursor, but it is optional).

Behold:

.botao{
   border-radius: 20px;
   width: 60px; /* largura do botão */
   height: 60px; /* altura do botão */
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   background-color: #b22002; /* cor de fundo do botão */
}

/* haste da seta - */
.botao::before{
   content: '';
   height: 2px; /* altura */
   width: 20px; /* largura da haste */
   background-color: #fff; /* cor da haste. Deve ser igual à cor da seta */
   margin-left: -1px; /* afasta um pouco da esquerda para ajustar à seta */
   position: absolute;
}

/* seta pra direita > */
.botao::after{
   content: '';
   /* rotaciona a seta para ficar virada pra direita */
   -moz-transform: rotate(315deg);
   -ms-transform: rotate(315deg);
   -webkit-transform: rotate(315deg);
   transform: rotate(315deg);
   
   border-bottom-style: solid;
   border-bottom-width: 2px; /* largura da seta (parte de cima) */
   border-right-style: solid;
   border-right-width: 2px; /* largura da seta (parte de baixo) */
   /* height e width devem ter o mesmo valor */
   height: 12px; /* altura da seta */
   width: 12px; /* largura da seta */
   margin-left: 3px; /* desloca pra direita para ajustar */
   border-color: #fff; /* cor da seta */
}

.botao:hover{
   background-color: #841600; /* cor de fundo do botão quando passa o mouse */
}
<a href="#" class="botao"></a>

  • Very good, that’s exactly what I was looking for, thank you very much.

  • If you thought the answer was better and you answered it, you can mark it on.

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.