html и css - вставить кнопку на сайт

@vladenio · Регистрация: 16.03.2013

Студворк — интернет-сервис помощи студентам

Мне нужно вставить кнопку на сайт.
У меня есть код HTML

HTML5
1
<button type="button" name="button" value="Button" class="css3button">submit</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
27
28
29
30
31
32
33
34
35
36
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
padding: 10px 30px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#2eacc2 50%,
#62e4ed 50%,
#269993 58%,
#37b9bd);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
color-stop(0.50, #2eacc2),
color-stop(0.50, #62e4ed),
color-stop(0.58, #269993),
to(#37b9bd));
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border: 2px solid #000000;
-moz-box-shadow:
3px 4px 5px rgba(000,000,000,0.4),
inset 0px 0px 5px rgba(161,142,016,0.8);
-webkit-box-shadow:
3px 4px 5px rgba(000,000,000,0.4),
inset 0px 0px 5px rgba(161,142,016,0.8);
box-shadow:
3px 4px 5px rgba(000,000,000,0.4),
inset 0px 0px 5px rgba(161,142,016,0.8);
text-shadow:
0px -1px 3px rgba(255,255,255,1),
0px 1px 0px rgba(255,255,255,0.3);
}

Как их обьединить между собой чтобы вставить на сайт?И укажите пожалуйста какие менять значения для смены названия и ссылки...

@Фаер · 16.03.2013, 15:21

Чтобы объединить, между тегами <head></head> вставьте такую строку:

HTML5
1
<link rel="stylesheet" type="text/css" href="адрес файла css">

Название кнопки - атрибут name.

Если же Вам нужно сменить надпись на кнопке, то орудовать Вам нужно подчёркнутым ниже куском кода

class="css3button">submit</button>

На счёт ссылки, не уверен, что это лучший вариант, но можно кнопку вставить в тег <a>:

HTML5
1
<a href="ссылка"><button type="button" name="button" value="Button" class="css3button">Кнопка</button></a>

@vladenio · 16.03.2013, 16:18 **[ТС]**

Сообщение от vladenio

Мне нужно вставить кнопку на сайт.
У меня есть код HTML

HTML5
1
<button type="button" name="button" value="Button" class="css3button">submit</button>

Код немножко не такой, а вот такой

HTML5
1
<button type="button" name="" value="" class="css3button">submit</button>

Добавлено через 29 минут
Вот что получилось у меня

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
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\Admin\Desktop">
 
</head>
<body>
<table width="150" height="200" cellspacing="0" cellpadding="0">
<tr>
    <td>
<a href="http://vk.com/arcanecraft"><button type="button" name="button" value="Button" class="css3button">Группа в VK</button></a>
    </td>
</tr>
<tr>
    <td>
<a href="http://arcanecraft.super-forum.com/"><button type="button" name="button" value="Button" class="css3button">Forum</button></a>
    </td>
</tr>
<tr>
    <td>
<a href="http://vk.com/doc-44523881_161147598?dl=5437f824497c4abe2b"><button type="button" name="button" value="Button" class="css3button">Download</button></a>
    </td>
</tr>
<tr>
    <td>
<a href="home"><button type="button" name="button" value="Button" class="css3button">Videos</button></a>
    </td>
</tr>
</table>
</body>
</html>

кнопки работают, но они маленькие и стандартные. где здесь ошибка? И как выложить файл css так, чтобы при указании адреса на него он работал?впринципе это должна быть маленькая панелька с 4 кнопок, добавлена как гаджет на блогере.

Добавлено через 25 минут
КиберПёс, пёс отозвись

@Фаер · 16.03.2013, 19:55

На IE проверяешь? У меня на IE фигню выводит, а на Chrome всё путём:

@vladenio · 16.03.2013, 20:03 **[ТС]**

на мозиле проверяю

Добавлено через 1 минуту
можешь скинуть скинуть файл html и css? Синхронизирую со своими

@Фаер · 16.03.2013, 20:11

Вот, если задать кнопки так, то и в IE, и в Chrome, и в Mozill'е они будут работать.

HTML5
1
<button type="button" name="button" value="Button" class="css3button" onclick="location.href='http://vk.com/arcanecraft'">Группа в VK</button>

Но вот на счёт стилей не знаю.

Везде по-разному выводит, но только в Chrome красиво.

@vladenio · 16.03.2013, 20:19 **[ТС]**

страничка не видит файл css
ппц

@Фаер · 16.03.2013, 20:23

HTML5
1
href="C:\Users\Admin\Desktop">

Desktop - это каталог или файл CSS?

@vladenio · 16.03.2013, 20:32 **[ТС]**

да я видел тут ошибку
вот что сейчас стоит

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
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
 
 
 
<table width="150" height="200" cellspacing="0" cellpadding="0" border="1">
<tr>
    <td>
<a href="http://vk.com/arcanecraft"><button type="button" name="button" value="Button" class="css3button">Группа в VK</button></a>
    </td>
</tr>
<tr>
    <td>
<a href="http://arcanecraft.super-forum.com/"><button type="button" name="button" value="Button" class="css3button">Forum</button></a>
    </td>
</tr>
<tr>
    <td>
<a href="http://vk.com/doc-44523881_161147598?dl=5437f824497c4abe2b"><button type="button" name="button" value="Button" class="css3button">Download</button></a>
    </td>
</tr>
<tr>
    <td>
<a href="home"><button type="button" name="button" value="Button" class="css3button">Videos</button></a>
    </td>
</tr>
</table>
</head>
</html>

Добавлено через 6 минут
фатальная ошибка, файл формата CCS. 1 буква а пол дня мучений. Ну последних 2 вопроса куда выложить фай ксс чтобы в инете он читался?И как сделать кнопки стандартной величины 50х150

@Фаер · 16.03.2013, 20:47

Сообщение от vladenio

куда выложить фай ксс

В тот же каталог, что и HTML-документ. Или в любой другой, но тогда в link надо указать его полный адрес.

Величину прописываешь в CSS, в начале, например:

CSS
1
2
3
.css3button {
height:50;
width:150;

И кнопки, всё-таки, сделай через onclick(ну, я писал выше). Потому что, написанные через <a>, они в IE не ссылаются.

@vladenio · 16.03.2013, 21:17 **[ТС]**

кнопки сделал, стиль сменил, только с размерами всеравно не получается. http://ms-arcanecraft.blogspot.com/

@sending · 16.03.2013, 21:47

vladenio, а зачем Вы используете button, если в Вашем случае можно все повесить на <a>?

@Фаер · 16.03.2013, 21:51

Сообщение от vladenio

с размерами всеравно не получается

Фиг знает, я прям с сайта скинул Твой CSS, локально пустил - всё работает. Попробуй px что ли подописывать.

@sending · 16.03.2013, 21:58

vladenio, добавьте в Ваш код display: block; и уберите height:50px и все будет как Вам надо.

@Фаер · 16.03.2013, 22:14

Если px добавить, все нормально работает. Смотри:

@vladenio · 17.03.2013, 15:02 **[ТС]**

всем спасибо, помогло

@sending · 17.03.2013, 15:32

vladenio, если Вы просто разово сделали сайт, то все нормально, но если Вы постоянно хотите делать сайты, то Вам следует знать, что такие меню делаются через ненумерованные списки и вместо <button> используют простой <a>.

@vladenio · 17.03.2013, 17:50 **[ТС]**

спасибо, буду знать

Новые блоги и статьи Все статьи Все блоги /
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

@Фаер 792 / 398 / 260 Регистрация: 09.12.2011 Сообщений: 786 Записей в блоге: 53
	16.03.2013, 19:55
	На IE проверяешь? У меня на IE фигню выводит, а на Chrome всё путём: Миниатюры 1

@vladenio 0 / 0 / 1 Регистрация: 16.03.2013 Сообщений: 52
	16.03.2013, 20:03 [ТС]
	на мозиле проверяю Добавлено через 1 минуту можешь скинуть скинуть файл html и css? Синхронизирую со своими 0

@vladenio 0 / 0 / 1 Регистрация: 16.03.2013 Сообщений: 52
	16.03.2013, 20:19 [ТС]
	страничка не видит файл css ппц 0

@vladenio 0 / 0 / 1 Регистрация: 16.03.2013 Сообщений: 52
	16.03.2013, 21:17 [ТС]
	кнопки сделал, стиль сменил, только с размерами всеравно не получается. http://ms-arcanecraft.blogspot.com/ 0

@sending 64 / 22 / 9 Регистрация: 03.11.2012 Сообщений: 327
	16.03.2013, 21:47
	vladenio, а зачем Вы используете button, если в Вашем случае можно все повесить на <a>? 0

@sending 64 / 22 / 9 Регистрация: 03.11.2012 Сообщений: 327
	16.03.2013, 21:58
	vladenio, добавьте в Ваш код display: block; и уберите height:50px и все будет как Вам надо. 1

@Фаер 792 / 398 / 260 Регистрация: 09.12.2011 Сообщений: 786 Записей в блоге: 53
	16.03.2013, 22:14
	Если px добавить, все нормально работает. Смотри: Миниатюры 1

@vladenio 0 / 0 / 1 Регистрация: 16.03.2013 Сообщений: 52
	17.03.2013, 15:02 [ТС]
	всем спасибо, помогло 0

@sending 64 / 22 / 9 Регистрация: 03.11.2012 Сообщений: 327
	17.03.2013, 15:32
	vladenio, если Вы просто разово сделали сайт, то все нормально, но если Вы постоянно хотите делать сайты, то Вам следует знать, что такие меню делаются через ненумерованные списки и вместо <button> используют простой <a>. 1

@vladenio 0 / 0 / 1 Регистрация: 16.03.2013 Сообщений: 52
	17.03.2013, 17:50 [ТС]
	спасибо, буду знать 0