Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
trebushe
0 / 0 / 0
Регистрация: 08.07.2016
Сообщений: 61
1

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

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

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

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

Отменить смещение блоков при динамическом добавлении текста
Спасибо большое. Ещё вопрос есть один. Есть скрипт который при нажатии на...

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

При добавлении текста в теге <p></p> съезжает вниз родительский блок
Здравствуйте, помогите разобраться пожалуйста, родительский блок- шапка сайта,...

Смещение текста внутри кнопки при клике
Приветствую! Вот пример простой кнопки на css { outline: none; min-width:...

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

8
mrtoxas
Модератор
Эксперт HTML/CSS
2571 / 1904 / 1185
Регистрация: 12.07.2015
Сообщений: 5,121
Записей в блоге: 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
2571 / 1904 / 1185
Регистрация: 12.07.2015
Сообщений: 5,121
Записей в блоге: 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
2571 / 1904 / 1185
Регистрация: 12.07.2015
Сообщений: 5,121
Записей в блоге: 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
2571 / 1904 / 1185
Регистрация: 12.07.2015
Сообщений: 5,121
Записей в блоге: 3
30.05.2017, 20:13 8
Лучший ответ Сообщение было отмечено mrtoxas как решение

Решение

Так задайте нормально размеры
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

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

При нажатии на кнопку,другие кнопки приближаются к данной кнопки
Привет всем!При нажатии на кнопку,другие кнопки приближаются к кнопке на...

Увеличивается ширина при добавлении
Добавляю картинку &lt;div id=&quot;text&quot;&gt; &lt;img src=&quot;cot.jpg&quot; class=&quot;cot&quot;&gt; &lt;/div&gt;...


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

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

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