Como fazer o botão CSS personalizado responsivo?

Question

Como fazer o botão CSS personalizado responsivo?

Criei um botão CSS, mas não responde. Eu tentei adicionar EM or % mas ainda não funciona. Quero mudar a largura e a altura de acordo com a resolução do ecrã.

segue-se o código CSS que estou a usar:

@media only screen and (min-width:321px) and (max-width:480px) { }

HTML

<div>
   <p>
      <button class="btn btn-1 btn-1a">Click Here To Enter The Future</button> 
   </p>
</div>

CSS

.btn {
  font-size:0.875em;
  display:block;
  left:-60px;
  margin-top:35px;
}

Neste momento, o botão está a mover-se da esquerda para a direita, mas quero que o botão apareça exactamente no mesmo local.

4

css responsive-design button

Author: Tom Hagen, 2014-01-03

Source

3 answers

score 16 · Answer 1

Pode adicionar width:100%; para atingir o seu objectivo.

enter image description here

.btn {
      font-size:0.875em;
      display:block;
      left:-60px;
      margin-top:35px;
      width:100%;
    }

score 0 · Answer 2

Isto deve funcionar

.btn {
   width: 100%;
   min-width: 50px;  // add this if you want
   max-width: 300px; // add this if  you want, adjust accordingly
}

score 0 · Answer 3

Isto funciona comigo.

<script>
$(document).ready(function() {

    $('#select_preferences').multiselect({
        buttonText: function(options, select) {
            return 'Look for users that:';
        },
        buttonTitle: function(options, select) {
            var labels = [];
            options.each(function() {
                labels.push($(this).text()); //get the options in a string. later it would be joined with - seprate between each.
            });
         if(!labels.length ===0 )
        {
         $('#range-div').removeClass('hide');
         // The class 'hide' hide the content.
         //So I remove it so it would be visible.
        }
        if (labels.length ===0)
         $('#range-div').addClass('hide');
     //If the labels array is empty - then do use the hide class to hide the range-selector.
            return labels.join(' - ');
    // the options seperated by ' - '
    // This returns the text of th options in labels[].
        }
    });