Установите ширину в% для ссылки, стилизованной под кнопки, для длины текста

Question

Установите ширину в% для ссылки, стилизованной под кнопки, для длины текста

0

Я думаю, что в названиях сказано все. Я хочу, чтобы стиль css-ссылки выглядел как кнопка. У меня есть этот код здесь:

    .botsup {
  padding:5px;
background:#ffae00; /*fallback for browsers that don't support gradients*/
background: -webkit-linear-gradient(top, #ffae00, #d67600);
background: -moz-linear-gradient(top, #ffae00, #d67600);
background: -o-linear-gradient(top, #ffae00, #d67600);
background: linear-gradient(top, #ffae00, #d67600);
border:4px outset #dad9d8;

  border: 3px solid #999;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 20px;
/*give the button a drop shadow*/
-webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
  text-decoration:none;

display: block;
width: 82%;
line-height: 190%;
font-family: "Arial";
text-align: center;
vertical-align: middle;
font-weight: bolder;
font-size: 98.5%;
color: gray;


}

Он работает нормально, но я хочу установить ширину кнопки, несмотря на ее длину текста, и я хочу сделать это, используя% insted of px. Есть ли способ?

user3261537 18 фев. 2014, в 15:57

Источник

Теги:

html

css

1 ответ

Ещё вопросы

easwee · Answer 1 · 2014-02-18T13-20-00.000Z

Да, есть.

Задавать:

display:inline-block;

и удалить

width: 82%;

http://jsfiddle.net/5jd5h/6/

Новый css:

.botsup {
padding:5px;
display: inline-block;
line-height: 190%;
font-family: "Arial";
text-align: center;
vertical-align: middle;
font-weight: 700;
font-size: 98.5%;
color: gray;
background: #ffae00;
background: -webkit-linear-gradient(top, #ffae00, #d67600);
background: -moz-linear-gradient(top, #ffae00, #d67600);
background: -o-linear-gradient(top, #ffae00, #d67600);
background: linear-gradient(top, #ffae00, #d67600);
border:4px outset #dad9d8;
border: 3px solid #999;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .55) 0 1px 6px;
text-decoration:none;
}

@ Goosebumbs - надо делать, если я правильно прочитал тарабарщину :)
да, я хотел дать тот же ответ, что и вы: P, так что я думаю, что вы все правильно прочитали.
Хорошо, я вижу, что это работает :), но как я могу установить ширину?
@ user3261537 Почему вы хотите установить ширину? Вы можете установить максимальную ширину или минимальную ширину - с фиксированной шириной у вас будет то же поведение, что и раньше.
Что я хочу сделать, это установить один и тот же виджет для каждой ссылки / кнопки ...
@ user3261537 Но вы уже сделали это в своем первом примере в вопросе?
В примере вопроса ширина зависит от длины текста
@ user3261537 Не совсем - в примере вопроса ширина зависит от ширины элемента, который является родителем кнопки ссылки. Ваша кнопка всегда будет на 82% родительской. Проверьте эту скрипку - jsfiddle.net/5jd5h/7 - первые две кнопки используют ваш код, последняя - мой.