Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
trebushe
0 / 0 / 0
Регистрация: 08.07.2016
Сообщений: 61
#1

Увеличиваются кнопки при добавлении текста - HTML, CSS

30.05.2017, 19:31. Просмотров 187. Ответов 8
Метки нет (Все метки)

Добрый вечер, форумчане. Столкнулся с проблемой что при названии кнопки исходная рамка изменяет размер, как исправить?

Заранее спасибо, ниже скрины
0
Миниатюры
Увеличиваются кнопки при добавлении текста  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
30.05.2017, 19:31
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Увеличиваются кнопки при добавлении текста (HTML, CSS):

Отменить смещение блоков при динамическом добавлении текста - HTML, CSS
Спасибо большое. Ещё вопрос есть один. Есть скрипт который при нажатии на кнопку выводит текст посередине, но при этом все блоки смещаются...

При добавлении товара в корзину не отображаются кнопки для увеличения количества добавляемых товаров - HTML, CSS
Пожалуйста помогите При добавлении товара в корзину не отображаются кнопки для увеличения количества добавляемых товаров в гугл хром,...

Смещение текста внутри кнопки при клике - HTML, CSS
Приветствую! Вот пример простой кнопки на css { outline: none; min-width: 229px; padding: .6em 3.7em; } <input type="button"...

Выравнивание текста по центру внутри абсолютно спозиционированной кнопки при респонсив дизайне - HTML, CSS
Всем привет, нужна помощь в выравнивании текста внтури кнопки с позицией absolute. Подскажите как мне выровнить текст по центру. вот код:...

Картинки не увеличиваются - HTML, CSS
Скачал шаблон. Стал его ковырять. На странице сайта есть ряд картинок. При нажатии на любую из них она должна увеличиваться. Соответственно...

При нажатии на кнопку,другие кнопки приближаются к данной кнопки - HTML, CSS
Привет всем!При нажатии на кнопку,другие кнопки приближаются к кнопке на которую я нажимаю.Так как у :active значения width и height меньше...

8
mrtoxas
Модератор
Эксперт HTML/CSS
2538 / 1876 / 1027
Регистрация: 12.07.2015
Сообщений: 5,058
Записей в блоге: 3
30.05.2017, 19:33 #2
trebushe, дайте код
0
trebushe
0 / 0 / 0
Регистрация: 08.07.2016
Сообщений: 61
30.05.2017, 19:41  [ТС] #3
mrtoxas,


CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
.container {
  padding: 2em;
  z-index: 4;
}
 
 
button,
button::after {
  -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
    transition: all 0.3s;
    
}
 
button {
  background: none;
  border: 3px solid #000;
  border-radius: 5px;
  color: #000;
  display: block;
  font-size: 1.6em;
  font-weight: bold;
  margin: 1em auto;
  padding: 2em 6em;
  position: relative;
  text-transform: uppercase;
  
}
 
button::before,
button::after {
  background: #000;
  content: '';
  position: absolute;
  z-index: -1;
}
 
button:hover {
  color: #fff;
}
 
/* BUTTON 1 */
.btn-1::after {
    
  height: 0;
  left: 0;
  top: 0;
  width: 100%;
  
}
 
.btn-1:hover:after {
  height: 100%;
}
 
/* BUTTON 2 */
.btn-2::after {
    
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
}
 
.btn-2:hover:after {
  width: 100%;
}
 
/* BUTTON 3 */
.btn-3::after {
    
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}
 
.btn-3:hover:after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}
 
/* BUTTON 4 */
 
.btn-4::before {
  
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}
 
.btn-4::after {
    
  background: #fff;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}
 
.btn-4:hover:after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}
 
 
/* BUTTON 5 */
.btn-5 {
  overflow: hidden;
}
 
.btn-5::after {
  /*background-color: #f00;*/
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}
 
.btn-5:hover:after {
  height: 100%;
  width: 135%;
}
0
mrtoxas
Модератор
Эксперт HTML/CSS
2538 / 1876 / 1027
Регистрация: 12.07.2015
Сообщений: 5,058
Записей в блоге: 3
30.05.2017, 19:47 #4
Вы же размеры кнопок внутренними отступами задали, вот они и увеличиваются.
0
trebushe
0 / 0 / 0
Регистрация: 08.07.2016
Сообщений: 61
30.05.2017, 19:49  [ТС] #5
mrtoxas, можете сказать где эти отступы? font-size: 1.6em; это?
0
mrtoxas
Модератор
Эксперт HTML/CSS
2538 / 1876 / 1027
Регистрация: 12.07.2015
Сообщений: 5,058
Записей в блоге: 3
30.05.2017, 19:51 #6
25я строка
0
trebushe
0 / 0 / 0
Регистрация: 08.07.2016
Сообщений: 61
30.05.2017, 19:58  [ТС] #7
mrtoxas, Рамка все равно меняется
0
mrtoxas
Модератор
Эксперт HTML/CSS
2538 / 1876 / 1027
Регистрация: 12.07.2015
Сообщений: 5,058
Записей в блоге: 3
30.05.2017, 20:13 #8
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Так задайте нормально размеры
CSS
1
2
3
4
button {
  width:300px;
  height:200px;
}
0
trebushe
0 / 0 / 0
Регистрация: 08.07.2016
Сообщений: 61
30.05.2017, 20:15  [ТС] #9
mrtoxas, Спасибо)
0
30.05.2017, 20:15
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
30.05.2017, 20:15
Привет! Вот еще темы с ответами:

При добавлении символа сдвигается текст - HTML, CSS
<div class="goodname"><span class="red"><?php echo (isset($gooder)) ? $gooder : ' '; ?></span>*Title:</div> Через php код перед...

Подвал смещается при добавлении border - HTML, CSS
Здравствуйте всем! У меня вот какая трабла-есть 3 нижних блока,заключённых в родительский(это и есть подвал), при уменьшении окна...

Съезжает меню при добавлении div - HTML, CSS
Столкнулся с такой проблемой, у меня съезжает меню при добавлении Div. не могу понять в чем проблема... <!DOCTYPE HTML PUBLIC...

Косяк при добавлении рамки hover - HTML, CSS
img { } img:hover { border: 3px solid #f26522; /* Рамка при наведении на рисунок курсора мыши */ } <div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru