Style for the div that contains a button with style

Question

Style for the div that contains a button with style

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Well the problem I have is that the submit is very low, as you can see in the photos, and what I want is to be below the "Previous"

Css

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 6/03/2018
    Author     : Andrés Tabares Vélez - Informatic Engineering Intern
    Celphone   : +57 302 333 7407
    E-mail     : [email protected]
*/


a.tip {
    text-decoration: none
}

a.tip:hover {
    cursor: help;
    position: relative
}

a.tip span.by {
    display: none;
}

a.tip:hover span.by {
    /*border: #c0c0c0 1px dotted;*/
    padding: 0px 0px 0px 60px;
    margin: 0px 0px 0px 60px;
    display: block;
    z-index: 100;
    left: 10px;
    /* margin: 10px; */
    width: 300px;
    /*height: 200px;*/
    position: absolute;
    top: -30px;
    text-decoration: none;
}


.contenedor:hover .imagen {
    -webkit-transform:scale(1.3);transform:scale(1.3);
    cursor:pointer; 
    cursor: hand;
}

.separator{
    padding: 0px 3% 0px 0px;
}

.contenedor {
    overflow:hidden; 
}

.navlist li
{
    align-content: center;
    display: inline;
}

#footer{ 
    color: #fff;
    z-index: 20;
    position:fixed;  
    bottom: 0;
    font-family: fantasy, verdana,arial;  
    font-size:10pt;   
    height: 73px;
    width: 100%;
    background: rgba(50,171,224,1);
    background: -moz-linear-gradient(left, rgba(50,171,224,1) 0%, rgba(113,206,239,1) 29%, rgba(33,180,226,1) 41%, rgba(235,25,112,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(50,171,224,1)), color-stop(29%, rgba(113,206,239,1)), color-stop(41%, rgba(33,180,226,1)), color-stop(100%, rgba(235,25,112,1)));
    background: -webkit-linear-gradient(left, rgba(50,171,224,1) 0%, rgba(113,206,239,1) 29%, rgba(33,180,226,1) 41%, rgba(235,25,112,1) 100%);
    background: -o-linear-gradient(left, rgba(50,171,224,1) 0%, rgba(113,206,239,1) 29%, rgba(33,180,226,1) 41%, rgba(235,25,112,1) 100%);
    background: -ms-linear-gradient(left, rgba(50,171,224,1) 0%, rgba(113,206,239,1) 29%, rgba(33,180,226,1) 41%, rgba(235,25,112,1) 100%);
}  

#content {
    background: grey;
    clear: both;
    color: #333;
    padding: 10px 120px 98px 20px;
}

#header, #header h1 a, #header h1{
    background-color:#84CCF4; 
}




/*basic reset*/
* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  /*Image only BG fallback*/

  /*background = gradient + image pattern combo*/
  background: grey;
}

body {
  font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}
#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;

  /*stacking fieldsets above each other*/
  position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
  display: none;
}
/*inputs*/
#msform input,
#msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2c3e50;
  font-size: 13px;
}
/*buttons*/
#msform .action-button {
  width: 100px;
  background: #27ae60;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}
#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27ae60;
}
/*headings*/
.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #2c3e50;
  margin-bottom: 10px;
}
.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}
#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  width: 33.33%;
  float: left;
  position: relative;
}
#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #333;
  background: white;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
  content: "";
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,
#progressbar li.active:after {
  background: #27ae60;
  color: white;
}


.aSubmit {
  -webkit-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -o-transition: color 0.5s;
  -ms-transition: color 0.5s;
  transition: color 0.5s;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  top: 70%;
  font-weight: 100;
  display: block;
  position: absolute;
  z-index: 3;
  text-decoration: none;
  width: 200px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center;
  color: white;
  height: 60px;
  line-height: 60px;
  border-radius: 30px;
}
.aSubmit.loading {
  color: rgba(255,255,255,0);
}
.aSubmit.feedback {
  z-index: 1;
}
.aSubmit.feedback:after {
  -webkit-transition: background 0.2s, -webkit-transform 0.2s;
  -moz-transition: background 0.2s, -moz-transform 0.2s;
  -o-transition: background 0.2s, -o-transform 0.2s;
  -ms-transition: background 0.2s, -ms-transform 0.2s;
  transition: background 0.2s, transform 0.2s;
  border-radius: 30px;
  position: absolute;
  visibility: hidden;
  width: 200px;
  height: 100%;
  top: 0;
  left: 0;
  content: '';
  background: rgba(255,255,255,0.9);
}
.aSubmit:hover {
  background: rgba(255,255,255,0.1);
}
svg {
  position: relative;
  z-index: 2;
  pointer-events: none;
  width: 240px;
  height: 220px;
  cursor: pointer;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
rect {
  -webkit-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  fill: #3e3f4c;
}
path {
  fill: none;
  stroke-width: 4px;
  stroke-linecap: round;
  stroke: #1ecd97;
  stroke-dashoffset: 0px;
}
path#top,
path#bottom {
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  stroke-dasharray: 295px 1000px;
}
.loading-start .aSubmit {
  color: rgba(255,255,255,0);
}
.loading-start .aSubmit.loading {
  color: #fff;
}
.loading-start .aSubmit.feedback:after {
  visibility: visible;
  background: rgba(255,255,255,0);
  -webkit-transform: scale(1.5, 2);
  -moz-transform: scale(1.5, 2);
  -o-transform: scale(1.5, 2);
  -ms-transform: scale(1.5, 2);
  transform: scale(1.5, 2);
}
.loading-start #top,
.loading-start #bottom {
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  stroke-dasharray: 10px 1000px;
}
.loading-progress #top,
.loading-progress #bottom {
  -webkit-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
  -moz-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
  -o-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
  -ms-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
  transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
  stroke-dasharray: 10px 1000px;
  stroke-dashoffset: -150px;
}
.loading-end .aSubmit.loading {
  color: rgba(255,255,255,0);
}
.loading-end #top,
.loading-end #bottom {
  stroke: #f5f6f7;
}
.loading-end #top {
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  stroke-dasharray: 30px 1000px;
  stroke-dashoffset: -518px;
}
.loading-end #bottom {
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  stroke-dasharray: 10px 1000px;
  stroke-dashoffset: -490px;
}
.loading-end rect {
  fill: #1ecd97 !important;
}

View

<!-- multistep form -->
<?php
echo $this->Form->create('Cliente', array('class' => '', 'id' => 'msform'));
?>
<!-- progressbar -->
<ul id="progressbar">
    <li class="active">Necesidad del cliente</li>
    <li>Informacion Personal</li>
    <li>finish</li>
</ul>
<!-- fieldsets -->
<fieldset>
    <h2 class="fs-title">Hablanos sobre tu necesidad</h2>
    <h3 class="fs-subtitle">Requerimiento</h3>



    <div class="DontGrowWidth">
        <?php
        echo $this->Form->input('informacion', array('placeholder' => 'Cuentanos sobre el problema que tienes', 'label' => false,
            'class' => 'validador txtInformacion'));
        ?>
    </div>
    <input type="button" name="next" class="next action-button btn-nextOne" value="Next"  hidden/>
</fieldset>
<fieldset>
    <h2 class="fs-title">Hablanos sobre tu empresa</h2>
    <h3 class="fs-subtitle">Negocio</h3>
    <?php
    echo $this->Form->input('empresa', array('label' => false, 'placeholder' => 'Dinos el nombre de tu empresa',
        'class' => 'validador txtEmpresa'));
    echo $this->Form->input('telefono', array('label' => false, 'placeholder' => 'Dano el telefono de tu empresa',
        'class' => 'validador txtTelefono'));
    echo $this->Form->input('direccion', array('label' => false, 'placeholder' => 'Danos la direccion de tu empresa',
        'class' => 'validador txtDireccion'));
    ?>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button btn-nextTwo" value="Next" hidden/>
</fieldset>
<fieldset>
    <h2 class="fs-title">Hablanos sobre ti</h2>
    <h3 class="fs-subtitle">Cliente</h3>
    <?php
    echo $this->Form->input('cliente', array('label' => false, 'placeholder' => 'Dinos como te llamas',
        'class' => 'validador txtCliente'));

    echo $this->Form->input('horario', array('label' => false, 'placeholder' => 'Dinos en que horario podemos contactarte',
        'class' => 'validador txtHorario'));
    ?>

    <div id='captcha' class="g-recaptcha" data-sitekey="6LfukUYUAAAAABRE_7Ap1RJOG8tpmUJOJNnFDeo1" data-callback='recaptcha_callback'></div>
    <input type="button" name="previous" class="previous action-button" value="Previous" />




    <div class="divSubmit" hidden>
        <a href="#" class="aSubmit">submit</a>
        <a class="aSubmit loading" href="#">loading</a>
        <svg viewBox="0 0 240 220">
        <rect id="middle" x="20" y="100" width="200" height="60" rx="30"></rect>
        <path id="top" d="
              M 60,100
              L 50,100
              C 33.4357078,100 20,113.427814 20,130
              L 20,130
              C 20,146.568541 33.4331197,160  50,160
              L190,160
              C206.570288,160 220,146.572314 220,130
              L220,100
              C220,-60 180, 80 160,100
              C140,120 100,160 100,160
              "></path>
        <path id="bottom" d="
              M180,160
              L190,160
              C206.564295,160 220,146.572186 220,130
              L220,130
              C220,113.431458 206.56688,100 190,100
              L 50,100
              C33.4297125,100 20,113.435296 20,130
              C20,130 20,120 20,140
              C20,220 180,200 120,140
              C100,120 80,100 80,100
              "></path>
        </svg>
        <a class="aSubmit feedback" href="#"></a>
    </div>

</fieldset>
<?php echo $this->Form->end(); ?>



<!--echo $this->Form->input('id', array('type' => 'hidden'));-->

javascript jquery css3 css cakephp

asked by Andrés Vélez 23.03.2018 в 20:57

source

2 answers

I need a select / select selecting the name, bring me the NIT of my BD? LiteDB in UWP open a database in share mode

score 0 · Answer 1

It is not easy to find the problem without being able to debuge with the console, but try to play a bit with the class in css that you have in:

.aSubmit{
  top: 70%; // este valor intenta reducirlo y fijate si llegas a la posición deseada.
}

Greetings and luck!

score 0 · Answer 2

In your html after the line of code

<a class="aSubmit loading" href="#">loading</a>

You have a svg that is generating a height: 220px . The solution could be that within your tag a you send your image .svg, then give the styles you want, so you eliminate the space you have.

<a href="#" class="aSubmit"> <img src="img/btn.svg" alt=""> </a>

I hope you get the answer.