Кнопка html открыть/закрыть

Кнопка html, Кнопка html на сайт, Кнопка css, Кнопка java

Код html, как сделать кнопку html или div блок, создать html страницу или страницу с java, ajax. здесь будет разобрана тема css, как сделать свой стиль и присвоить стиль элементу, кнопки html, спойлеры, стили css.

Кнопка на сайт, первая кнопка открывает и закрывает при повторном нажатии блок кнопок, кнопки в блоке со ссылкой, у каждой кнопки справа можно вставить рисунок.

222 333

Создаем нашу кнопку html открывающую блок с кнопками:
<meta charset="utf-8">
  <title>Тег BUTTON</title>

Вот сама первая кнопка html - (в значении value="Открыть" вставите свой текст)
<div><input type="button" value="Открыть" onclick="Hide(this)"

Задаем стиль css нашей основной кнопки -
style="background-color: #ff3333; border-radius: 15px; border: 1px solid #fff; box-shadow: 1px 1px 3px #fff; color: white; display: block; font-size: 25px; font-weight: normal; height: 50px; outline: none; padding-left: 10px; text-align: left; text-decoration: none; text-transform: inherit; text-transform: inherit; width: 100%;">

Вставляем в кнопку картинку -
<img src="image/2.png"

Задаем стиль css картинке -
style="float: right; height: 5px; margin-right: 15px; margin-top: -36px; vertical-align: middle;" />

Кнопка закончилась.


Открываем блок html с кнопками -
<span style="display: none;">

Указываем кнопке адрес страницы на которую она отправит, класс и имя -
<a href="http://" class="nubex">
222

Всавляем в кнопку картинку со стилем css -
<img src="image/2.png" alt="000" style="height: 45px;vertical-align: middle;margin-right: 8px;float: right;margin-top: -5px;"></a>

Кнопок в блок можно вставить сколько угодно...
<a href="http://" class="nubex">   222<img src="image/2.png" alt="000" style="height: 45px;vertical-align: middle;margin-right: 8px;float: right;margin-top: -5px;"></a>

Закрываем блок с кнопками -
</span>

Как приятный бонус прилагается данный java скрипт, в нем можно вписать переменные (открыть/закрыть) при нажатии на кнопку надпись будет меняться.
<script>
function Hide(a)
{
   var b = a.parentNode.getElementsByTagName('span')[0].style;
   if(a.value == '111')
   {
      a.value = '222+';
      b.display = '';
   }
   else
   {
      a.value = '111';
      b.display = 'none';
   }
}
</script>

Вот этот же html код со стилями css и  java.

<div class="widget-inner">
  <title>Тег BUTTON</title>
<div><input type="button" value="Открыть" onclick="Hide(this)"   style="background-color: #ff3333; border-radius: 15px; border: 1px solid #fff; box-shadow: 1px 1px 3px #fff; color: white; display: block; font-size: 25px; font-weight: normal; height: 50px; outline: none; padding-left: 10px; text-align: left; text-decoration: none; text-transform: inherit; text-transform: inherit; width: 100%;">
<img alt="0" id="img_1" onclick="Hide(this)" src="image/2.png" style="float: right; height: 5px; margin-right: 15px; margin-top: -36px; vertical-align: middle;" />
<span style="display:none"> 
<a class="nubex" style="background-color: #ff3333; border-radius: 15px; border: 1px solid #fff; box-shadow: 1px 1px 3px #fff; color: white; display: block; font-size: 25px; font-weight: normal; height: 50px; outline: none; padding-left: 10px; text-align: left; text-decoration: none; text-transform: inherit; text-transform: inherit; width: 100%;" href="https://bloguavvv.blogspot.com/">222<img alt="лог" src="image/2.png" style="float: right; height: 10px; margin-right: 18px; margin-top: 11px; vertical-align: middle;" /></a>
<a class="nubex" style="background-color: #ff3333; border-radius: 15px; border: 1px solid #fff; box-shadow: 1px 1px 3px #fff; color: white; display: block; font-size: 25px; font-weight: normal; height: 50px; outline: none; padding-left: 10px; text-align: left; text-decoration: none; text-transform: inherit; text-transform: inherit; width: 100%;" href="https://bloguavvv.blogspot.com/">333<img alt="лог" src="image/2.png" style="float: right; height: 10px; margin-right: 18px; margin-top: 11px; vertical-align: middle;" /></a>
</span></div>
<script>
function Hide(a)
{
   var b = a.parentNode.getElementsByTagName('span')[0].style;
   if(a.value == 'Открыть')
   {
      a.value = 'Закрыть';
      b.display = '';
   }
   else
   {
      a.value = 'Открыть';
      b.display = 'none';
   }
}
</script> </div>


В данном блоге можно наглядно по инструкции посмотреть как работает: код html, как сделать кнопку html или div блок, создать html страницу или страницу с java, ajax. здесь будет разобрана тема css, как сделать свой стиль и присвоить стиль элементу, кнопки html, спойлеры, стили css и многое другое что может понадобится в процессе создания сайта или внесения в нем поправок и корректировок, всплывающие блоки div, форма заполнения, кнопки, картинка ссылка, джава код, разкрывающийся и закрывающийся див (div) блок, наполнение страниц, сжатие кодов, оптимизация сайта, ускорение скорости загрузки Вашего сайта и многие другие интересные и нужные темы для развития своего сайта, все это мы будем рассматривать в статьях и пополнять их. Будем рады Вашим отзывам, советам, идеям и комментария. Статьи направленны на помощь начинающим программистам, в связи с чем все желающие могут присоединится и помочь тем кто не сможет разобраться и попросит совета в программировании html, css, java, ajax.

<div>
<input onclick="Hide(this)" style="background-color: #ff3333; border-radius: 15px; border: 1px solid #fff; box-shadow: 1px 1px 3px #fff; color: white; display: block; font-size: 25px; font-weight: normal; height: 50px; outline: none; padding-left: 10px; text-align: left; text-decoration: none; text-transform: inherit; text-transform: inherit; width: 100%;" type="button" value="Открыть" />
<img src="image/2.png" style="float: right; height: 5px; margin-right: 15px; margin-top: -36px; vertical-align: middle;" />
<span style="display: none;"> 
<a class="nubex" href="https://bloguavvv.blogspot.com/" style="background-color: #ff3333; border-radius: 15px; border: 1px solid #fff; box-shadow: 1px 1px 3px #fff; color: white; display: block; font-size: 25px; font-weight: normal; height: 50px; outline: none; padding-left: 10px; text-align: left; text-decoration: none; text-transform: inherit; text-transform: inherit; width: 100%;">222<img alt="лог" src="image/2.png" style="float: right; height: 10px; margin-right: 18px; margin-top: 11px; vertical-align: middle;" /></a>
<a class="nubex" href="https://bloguavvv.blogspot.com/" style="background-color: #ff3333; border-radius: 15px; border: 1px solid #fff; box-shadow: 1px 1px 3px #fff; color: white; display: block; font-size: 25px; font-weight: normal; height: 50px; outline: none; padding-left: 10px; text-align: left; text-decoration: none; text-transform: inherit; text-transform: inherit; width: 100%;">333<img alt="лог" src="image/2.png" style="float: right; height: 10px; margin-right: 18px; margin-top: 11px; vertical-align: middle;" /></a>
</span>
<script>
function Hide(a)
{
   var b = a.parentNode.getElementsByTagName('span')[0].style;
   if(a.value == 'Открыть')
   {
      a.value = 'Закрыть';
      b.display = '';
   }
   else
   {
      a.value = 'Открыть';
      b.display = 'none';
   }
}
</script></div>
</div>