0

Imagen

Necesito darle forma al botón tal y como se muestra en la imagen, ¿cómo podría hacerlo!?

<div class="col-md-2">
    <div class="input-group">
        <input class="form-control" placeholder="Desde" type="text" id="desde"/>
        <span id="clickdesde" class="input-group-btn">
            <button style="border-radius: 2px" class="form-control btn btn-success"><span class="fa fa-calendar"></span></button>                                            
        </span>
    </div>                                         
</div>

<div class="col-md-2">
    <div class="input-group">
        <input class="form-control" placeholder="Hasta" type="text" id="hasta"/>
        <span id="clickhasta" class="input-group-btn">
            <button style="border-radius: 2px" class="form-control btn btn-success"><span class="fa fa-calendar"></span></button>                                            
        </span>
    </div>                                         
</div>
4
  • Hola y bienvenido, qué has intentado hasta ahora? Tienes algo de código que nos puedas mostrar? el 6 feb. 2019 a las 12:37
  • Si, lo acabo de agregar.
    – Tito Perez
    el 6 feb. 2019 a las 12:42
  • 1
    existe una libreria llamada semantic-ui podrias basarte de ellos como lo hacen
    – jjoselon
    el 6 feb. 2019 a las 12:47
  • Perfecto! Gracias!
    – Tito Perez
    el 6 feb. 2019 a las 13:14

2 respuestas 2

5

Puedes usar el psudoelemento ::before y hacer una flecha usando los bordes:

.row {
  margin-top: 20px;
}

.col {
  padding: 10px;
}

.input-group-btn {
  position: relative;
}

.input-group-btn::before {
  content: "";
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #28a745;
  top: 10px;
  left: -10px;
  position: absolute;
}

.input-group-btn:hover::before {
  content: "";
  border-right-color: #218838;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="row">

  <div class="col-xs-3">
    <div class="input-group">
      <input class="form-control" placeholder="Desde" type="text" id="desde" />
      <span id="clickdesde" class="input-group-btn">
      <button style="border-radius: 2px" class="form-control btn btn-success"><span class="fa fa-calendar"></span></button>
      </span>
    </div>
  </div>

  <div class="col-xs-3">
    <div class="input-group">
      <input class="form-control" placeholder="Hasta" type="text" id="hasta" />
      <span id="clickhasta" class="input-group-btn">
      <button style="border-radius: 2px" class="form-control btn btn-success"><span class="fa fa-calendar"></span></button>
      </span>
    </div>
  </div>
</div>

1

Tienes disponible esta herramienta online www.cssarrowplease.com

Funciona bastante bien para obtener una base y posteriormente ajustar el código a tus necesidades.

Como información extra, para los input de tipo fecha tienes esta librería flatpickr.js.org puede que también te resulte útil.

Un saludo

.input-group button{
  position: relative;
}

.input-group button::after{
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: #28a745;
  border-width:8px;
  margin-top:-8px;
  z-index:3
}

.input-group button:hover{
  background: #28a745;
  border-color:#28a745;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mt-2">
  <div class="col-md-2">
    <div class="input-group mb-2">
      <input class="form-control" placeholder="Desde" type="text" id="desde"/>
      <span id="clickdesde" class="input-group-btn">
        <button style="border-radius: 2px" class="form-control btn btn-success">
          <span class="fa fa-calendar"></span>
        </button>                                            
      </span>
    </div>                                         
  </div>

  <div class="col-md-2">
    <div class="input-group">
      <input class="form-control" placeholder="Hasta" type="text" id="hasta"/>
      <span id="clickhasta" class="input-group-btn">
        <button style="border-radius: 2px" class="form-control btn btn-success">
          <span class="fa fa-calendar"></span>
        </button>                                            
      </span>
    </div>                                         
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.