Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Кнопка с градиентным бордером и бликами в углах

Друзья, всем привет! Выручайте, нужно сделать следующего вида кнопку. С помощью псевдоэлементов делаю градиентный бордер с 2ух сторон, как сделать с 4ех не могу додумать, как и блики в углах. Заранее благодарен добрым людям!

HTML:
HTML5
1
2
3
<button type="button" class="fly--btn">
                        Начать путешествие
 </button>
CSS:
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
.fly--btn {
  background: rgba(0, 0, 0, 0.5);
  color: #A9A9A9;
  margin-top: 12%;
  position: relative;
  border: none;
  padding: 5px 20px; }
  .fly--btn:before, .fly--btn:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px; }
  .fly--btn:before {
    top: -1px;
    width: 1px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#101f2d), to(#3263a3));
    background-image: -webkit-linear-gradient(#101f2d, #3263a3);
    background-image: -o-linear-gradient(#101f2d, #3263a3);
    background-image: linear-gradient(#101f2d, #3263a3); }
  .fly--btn:after {
    right: -1px;
    height: 1px;
    background-image: -webkit-gradient(linear, left top, right top, from(#3263a3), to(#101f2d));
    background-image: -webkit-linear-gradient(left, #3263a3, #101f2d);
    background-image: -o-linear-gradient(left, #3263a3, #101f2d);
    background-image: linear-gradient(left, #3263a3, #101f2d); }
Ответ: От души!
Вопрос: Движение кнопки при прокрутке

Здравствуйте. Нужно сделать такую же кнопку как на сайте:



Речь идет о кнопке в правом нижнем углу. Саму кнопку и анимацию переворота я сделал (переворот происходит когда наводим мышку на кнопку). Но не могу понять как сделать чтоб кнопка так же двигалась при прокрутке и при этом делала один раз анимацию переворота трубки. Подскажите пожалуйста, как это реализовано на сайте-примере.
Ответ: Посмотри , смысл тот же, но немного по другому реализовано возвращение кнопки.
Вопрос: Создать кнопку на стороннем сайте + onclick

Нужно на сайте(сайт:http:// petridish. pw/) создать простую кнопку в левом верхнем углу и при нажатии выполнить команду в консоли( connect("ws://149.202.87.57:901") ). Создавать кнопку при загрузке страцицы будет плагин(для Chrome). Я в JS ноль, поэтому прошу других помочь мне хотя бы с добавлением кнопки!
Ответ: Та ошибка возникала из-за того, что ' была на 2-й строке, а логи не пишет, тип всё норм, но кнопка не отображается

Добавлено через 14 минут
Короче я сделал проще, посмотрел код кнопки уже существующей на сайте и немного изменил её, вот код:
Javascript
1
document.body.innerHTML+='<button style="width: 150px; position: absolute; z-index: 1000; top: 100px; left: 0px;" onclick="connect(\'ws://149.202.87.57:901\')" class="btn btn-primary">Special</button>'
Вопрос: Добавить в табличную ячейку со скругленными углами бордер

Добрый день.
Помогите, пожалуйста, создать бордер в таблице со скругленными углами. Только бордер должен быть до скругления.
Причем левый бордер одного цвета, нижний бордер другого.
Спасибо!
Ответ: Спасибо, ребята.
Оба варианта хороши.
Но второй лучше отображает задание )

Добавлено через 3 часа 31 минуту
Но пришлось использовать два варианта: второй для левого бордера, первый для нижнего...
Вопрос: Меню со скошенными углами

Доброго времени суток есть меню такого вида



(прошу прощения за Paint но макета нет под рукой)
как мне сделать скошенные углы у обоих менюшек. цвет у них, как видно , разный... я делал дополнительный backround в виде скоса (через бордеры) и позиционировал относительно основного меню . но как это применить к обоим меню чтобы выглядело как один сплошной скос?

Спасибо.
Ответ: При помощи бордеров можно сделать.
Хорошая статья на Хабре по поводу геометрических фигур в CSS:
HTML:
HTML5
1
2
3
4
5
6
7
8
<nav>
    <div id="trapezia">
        <!-- menu -->
    </div>
    <div id="trapezia2">
        <!-- menu -->
    </div>
</nav>
CSS:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#trapezia {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    height: 0;
    width: 1000px;
    margin-left: 20px;
}
 
#trapezia2 {
    border-bottom: 40px solid green;
    border-left: 20px solid transparent;
    height: 0;
    width: 1050px;
}
Результат на изображении.
Вопрос: Не отображается бордер поверх видео

Приветствую!
Есть секция в которой в качестве фона выбрано видео.
В секции есть блок у которого стоит бордер, он не отображается.
В чём может быть проблема?
Ответ: Бордер виден если поставить position: relative
Один вопрос, почему так?)
Например на кнопках у меня бордер виден.
Вопрос: Форма кнопок и кроссбраузерность

Подскажите пожалуйста как сделать кнопку в форме вытянутого по горизонтали градиентного пятиугольника, и чтобы при нажатии этой кнопки в зависимости от браузера выводилось название браузера, и менялся цвет кнопки Mozila - красный, Opera - зеленый, Chrome - синяя. Заранее премного вам благодарна!
Ответ: nitrogen9876543, опера и хром используют одинаковый движок, поэтому я их и объединил... Вот пример вёрстки кнопки:
HTML5
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" />
<title>Кнопка</title>
<style>
div{display:inline-block}
#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}
#rectangle {
    width: 200px;
    height: 100px;
    background: red;
    margin-left:-5px
}
#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
    margin-left:-5px
}
</style>
</head>
<body>
<div id="triangle-left"></div>
<div id="rectangle"></div>
<div id="triangle-right"></div>
</body>
</html>
но я сомневаюсь, что здесь есть рациональное зерно, проще использовать фоновую картинку или попробовать помучить transform, как в данной теме:
Вопрос: Почему иногда браузер устанавливает ширину бордера 0.8

Почему иногда браузер устанавливает ширину бордера 0.8, хотя в свойстве указано border: 1px solid grey?
Ответ: Завернула Input в div, поставила размеры и задала бордер. В отладке браузера смотрю а бордер не 1 а 0.8 px.
Вопрос: Кнопка на bootstrap'e

Есть слайдер.На слайде заголовок и абзац с кнопкой,и изображение.На обычном мониторе все хорошо,но на моб.экранах кнопка "складывается" в чем может быть проблема?Заранее спасибо,только начинаю разбираться в этом,поэтому возникли сложности.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="item active" style="background-image: url(img/yslug.png);">
    <div class="slide-content">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="row">
                    <div class="col-md-6">
                        <h2>Наши клиенты</h2>
                        <p style="opacity:0.8;">Наши клиенты – это люди, мнение и желание которых никогда не останется без внимания.<br>
Стать нашим клиентом очень легко. </p>
                        <br>
                        <a href="#" class="button">Наши клиенты</a>
                    </div>
                    <div class="col-md-6 hidden-sm hidden-xs">
                    <div class="slide-img-wrap">    
                    <img class="slidi" src="img/slklient.png" alt="Клиенты" style="opacity:0.8;"></div></div>
            </div>
        </div>
      </div>
      </div>
    </div>
Ответ:
Сообщение от hard_work
Можете запретить перенос текста в блоке с кнопкой. 3 Варианта на выбор:
HTML5
1
2
3
1. white-space: nowrap;
2. word-wrap: normal;
3. <nobr>Текст</nobr>;
Но правильнее убрать отступы родительского блока к примеру если разрешение экрана меньше 500px
CSS
1
@media (mix-width:500px) {body{padding: 0;} }
Спасибо большое)

Добавлено через 1 минуту
Сообщение от dzendev
Колонка становится просто узкая, текст начинает переносится на другую строчку, так как не умещается. А готовую страницу я хотел посмотреть, чтобы понять какие стили прописаны для кнопки, у неё так забавно бордер ломается...
Но вообще вам ответили уже выше. Нужно прописать для кнопки
HTML5
1
<a href="#" class="button">Наши клиенты</a>
стиль для запрета переноса слов
CSS
1
white-space: nowrap;
Да уже все понял,спасибо,что объяснил,вот кнопка,ну тут нет ничего особенного
CSS
1
2
3
4
5
6
7
color: white;
    border-color: white;
    border-style: solid;
    padding: 8px 25px;
    font-size: 14px;
    text-decoration: none;
    transition: all .5s ease;
Вопрос: Нужно сделать кнопки! Не знаю как!

Всем сдрасьте. Первый раз в жизни оставляю пост в каком либо форуме. Вопрос значит следующий. Короче нужно сделать 2 кнопки:

1) Первая нопка с заострённым углом (повалиный на бок домик =) ), как у яндекса «найти» но так, что бы все углы были скруглённые.
2) Обычная кнопка с закруглёнными углами с градиентом.

Обе кнопки с градиентом и… Что наверно самое сложное, обе кнопки имет несколько состояний и в одном из состояний у кнопки есть синяя граница которая отступает на 3 пикселя от кнопки так, что между кнопкой и границей пустое пространство.

Весь интернет перерыл, ничего не нашел, не по поводу заострения, не по поводу границ с отступом. Раньше я считал себя не плохим верстальщиком. Теперь я считаю что я ничего не знаю.

Извиняюсь за грамматические ошибки.
Ответ:
Сообщение от dzendev
Берите
HTML5
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
        div{
            text-align: center;
            padding: 20px 0;
        }
        button{
            outline: none;
            cursor: pointer;
        }
        .btn1{
            overflow: visible;
            display: inline-block;
            padding-right: 11px;
            /*height: 34px;*/
            line-height: 0.6;
            height: 38px;
            max-height: 38px;
            padding: 11px 14px 12px 15px;
            color: #fff;
            font-size: 15px;
            border: 1px solid #5e9450;
            border-bottom:1px solid #457339;
            background: -webkit-linear-gradient(top, #4ba91d, #38920c );
            background: linear-gradient(to bottom, #4ba91d, #38920c );
            border-radius: 2px;
            position: relative;
 
        }
        .btn1:before{
            content:'';
            overflow: visible;
            height: 19px;
            width: 10px;
            display: block;
            position: absolute;
            bottom:-1px;
            right:-6px;
            border-right: 1px solid #5e9450;
            border-bottom:1px solid #457339;
            background: -webkit-linear-gradient(top, #419d14, #38920c );
            background: linear-gradient(to bottom, #419d14, #38920c );
            -webkit-transform: skew(-30deg);
            transform: skew(-30deg);
        }
        .btn1:after{
            content:'';
            height: 19px;
            width: 10px;
            display: block;
            position: absolute;
            top:-1px;
            right:-6px;
            border-top: 1px solid #5e9450;
            border-right: 1px solid #5e9450;
            background: -webkit-linear-gradient(top, #4ba91d, #429e15 );
            background: linear-gradient(to bottom, #4ba91d, #429e15 );
            -webkit-transform: skew(30deg);
            transform: skew(30deg);
        }
        .btn1:hover{
            border: 1px solid #527f4d;
            border-bottom:1px solid #426c36;
            background: #dfdfdf;
            background: -webkit-linear-gradient(top, #3b8d13, #317e0b );
            background: linear-gradient(to bottom, #3b8d13, #317e0b );
        }
        .btn1:hover:before{
            border-right: 1px solid #527f4d;
            border-bottom:1px solid #426c36;
            background: -webkit-linear-gradient(top, #36850f, #317e0b );
            background: linear-gradient(to bottom, #36850f, #317e0b );
        }
        .btn1:hover:after{
            border-top: 1px solid #527f4d;
            border-right: 1px solid #527f4d;
            background: -webkit-linear-gradient(top, #3b8d13, #36860f );
            background: linear-gradient(to bottom, #3b8d13, #36860f );
        }
        .btn1:active{
            border: 1px solid #51744c;
            border-top:1px solid #3d5333;
            background: #35840e;
            box-shadow: inset 0px 5px 10px -8px rgba(0,0,0,0.75) !important;
        }
        .btn1:focus:after, .btn1:focus:before{
            box-shadow: 3px 0px 0px 0px rgba(81,153,219,1);
        }
        .btn1:focus{
            box-shadow: 0px 0px 0px 2px rgba(81,153,219,1);
        }
        .btn1:active:before{
            border-bottom: 1px solid #51744c;
            border-right: 1px solid #51744c;
            background: #35840e;
            box-shadow: none;
        }
        .btn1:active:after{
            border-right: 1px solid #51744c;
            border-top:1px solid #3d5333;
            background: #35840e;
            box-shadow: inset -4px 6px 10px -8px rgba(0,0,0,0.75);
        }
        .btn1:disabled, .btn1:disabled:active{
            border: 1px solid #DEDEDE;
            background: #F2F2F2;
            box-shadow: none;
            color:#8F8F8F;
            cursor: default;
        }
        .btn1:disabled:before{
            border-bottom: 1px solid #DEDEDE;
            border-right: 1px solid #DEDEDE;
            background: #F2F2F2;
            box-shadow: none;
        }
        .btn1:disabled:after{
            border-right: 1px solid #DEDEDE;
            border-top:1px solid #DEDEDE;
            background: #F2F2F2;
            box-shadow: none;
        }
        .btn2{
            overflow: visible;
            display: inline-block;
            padding-right: 11px;
            /*height: 34px;*/
            line-height: 0.6;
            height: 38px;
            max-height: 38px;
            padding: 11px 14px 12px 15px;
            color: #fff;
            font-size: 15px;
            border: 1px solid #5e9450;
            border-bottom:1px solid #457339;
            background: -webkit-linear-gradient(top, #4ba91d, #38920c );
            background: linear-gradient(to bottom, #4ba91d, #38920c );
            border-radius: 2px;
            position: relative;
 
        }
        .btn2:before{
            content:'';
            overflow: visible;
            height: 19px;
            width: 13px;
            display: block;
            position: absolute;
            bottom:-1px;
            right:-9px;
            border-right: 1px solid #5e9450;
            border-bottom:1px solid #457339;
            background: -webkit-linear-gradient(top, #419d14, #38920c );
            background: linear-gradient(to bottom, #419d14, #38920c );
            -webkit-transform: skew(-30deg);
            transform: skew(-30deg);
 
            border-radius: 0 2px 5px 0;
        }
        .btn2:after{
            content:'';
            height: 20px;
            width: 13px;
            display: block;
            position: absolute;
            top:-1px;
            right:-9px;
            border-top: 1px solid #5e9450;
            border-right: 1px solid #5e9450;
            background: -webkit-linear-gradient(top, #4ba91d, #429e15 );
            background: linear-gradient(to bottom, #4ba91d, #429e15 );
            -webkit-transform: skew(30deg);
            transform: skew(30deg);
 
            border-radius: 0 5px 2px 0;
        }
        .btn2:hover{
            border: 1px solid #527f4d;
            border-bottom:1px solid #426c36;
            background: #dfdfdf;
            background: -webkit-linear-gradient(top, #3b8d13, #317e0b );
            background: linear-gradient(to bottom, #3b8d13, #317e0b );
        }
        .btn2:hover:before{
            border-right: 1px solid #527f4d;
            border-bottom:1px solid #426c36;
            background: -webkit-linear-gradient(top, #36850f, #317e0b );
            background: linear-gradient(to bottom, #36850f, #317e0b );
        }
        .btn2:hover:after{
            border-top: 1px solid #527f4d;
            border-right: 1px solid #527f4d;
            background: -webkit-linear-gradient(top, #3b8d13, #36860f );
            background: linear-gradient(to bottom, #3b8d13, #36860f );
        }
        .btn2:active{
            border: 1px solid #51744c;
            border-top:1px solid #3d5333;
            background: #35840e;
            box-shadow: inset 0px 5px 10px -8px rgba(0,0,0,0.75) !important;
        }
        .btn2:focus:after{
            box-shadow: 3px -2px 0 1px #fff, 6px -3px 0px 2px rgba(81,153,219,1);
        }
        .btn2:focus:before{
            box-shadow: 3px 2px 0 1px #fff, 5px 3px 0px 3px rgba(81,153,219,1);
        }
        .btn2:focus{
            box-shadow: 0 0 0 3px #fff, 0px 0px 0px 6px rgba(81,153,219,1);
        }
        .btn2:active:before{
            border-bottom: 1px solid #51744c;
            border-right: 1px solid #51744c;
            background: #35840e;
            box-shadow: none;
        }
        .btn2:active:after{
            border-right: 1px solid #51744c;
            border-top:1px solid #3d5333;
            background: #35840e;
            box-shadow: inset -4px 6px 10px -8px rgba(0,0,0,0.75);
        }
        .btn2:disabled, .btn2:disabled:active{
            border: 1px solid #DEDEDE;
            background: #F2F2F2;
            box-shadow: none;
            color:#8F8F8F;
            cursor: default;
        }
        .btn2:disabled:before{
            border-bottom: 1px solid #DEDEDE;
            border-right: 1px solid #DEDEDE;
            background: #F2F2F2;
            box-shadow: none;
        }
        .btn2:disabled:after{
            border-right: 1px solid #DEDEDE;
            border-top:1px solid #DEDEDE;
            background: #F2F2F2;
            box-shadow: none;
        }
    </style>
</head>
<body>
    <p>Первый вариант попроще - нету скруглений у уголков справа и тень только одна. Второй вариант - есть скругления у уголков и двойная тень. Во втором варианте пришлось долго подгонять двойную тень, она немного несеметрично получилась, но глазу незаметно.</p>
    <div><button class="btn1">Кнопка 1</button></div>
    <div><button class="btn2">Кнопка 2</button></div>
</body>
</html>
Демонстрация

А что правда нету нигде готового варианта? Я вроде сам писал, как-то не особо искал
Я даже подобного нигде не мог найти. Огромное спасибо тебе чувак. Выручил