Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. HTML / CSS / PHP / JS / RegExp
  5. Кнопки html

Кнопки html

Кнопки html

#1 29 апреля 2019 в 20:15
В продолжение этой темы /forum/thread31656-1.html, убрал бы ссылки и добавил бы тень smile
  1.  
  2. <style>
  3.  .button_block {
  4. display: flex;
  5. }
  6.     .button {
  7. color: #d76929;
  8. background: #ffffff;
  9. margin: 0 5px;
  10. padding: 5px;
  11. border: 2px solid #d76929;
  12. border-radius: 3px;
  13. width: 32.2222%;
  14. display: block;
  15. float: left;
  16. text-align: center;
  17. text-decoration: none; /* Убрать сылку */
  18. box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Тень */
  19. }
  20. </style>
  21. <div class="button_block">
  22.    <a class="button" href="#">Ссылка1</a>
  23.    <a class="button" href="#">Ссылка2</a>
  24.    <a class="button" href="#">Ссылка3</a>
  25. </div>
  26.  
С border: 3px solid #d76929; больше похоже на кнопку или выглядит брутальнее...

  1.  
  2. <a href="" class="shiny-button"><strong>Ссылка</strong><br>Нажми меня</a>
  3. <a href="" class="shiny-button"><strong>Ссылка</strong><br>Нажми меня</a>
  4. <a href="" class="shiny-button"><strong>Ссылка</strong><br>Нажми меня</a>
  5. <a href="" class="shiny-button"><strong>Ссылка</strong><br>Нажми меня</a>
  6. <a href="" class="shiny-button"><strong>Ссылка</strong><br>Нажми меня</a>
  7.  
  8. <style>
  9. .shiny-button {
  10.   display: inline-block;
  11.   text-align: center;
  12.   border-width: 1px;
  13.   border-style: solid;
  14.   text-transform: uppercase;
  15.   text-decoration: none;
  16.   line-height: 1.1;
  17.   font-weight: normal;
  18.   font-family: sans-serif;
  19.   color: #FFFFFF;
  20.   font-size: 12px;
  21.   background-color: #00BFA9;
  22.   background-image: -webkit-linear-gradient(top, #00c4ae 0%, #17d1bb 48%, #00BFA9 49%, #00BFA9 82%, #00dbc2 100%);
  23.   background-image: -moz-linear-gradient(top, #00c4ae 0%, #17d1bb 48%, #00BFA9 49%, #00BFA9 82%, #00dbc2 100%);
  24.   background-image: -o-linear-gradient(top, #00c4ae 0%, #17d1bb 48%, #00BFA9 49%, #00BFA9 82%, #00dbc2 100%);
  25.   background-image: linear-gradient(top, #00c4ae 0%, #17d1bb 48%, #00BFA9 49%, #00BFA9 82%, #00dbc2 100%);
  26.   border-color: hsl(173, 45%, 37%);
  27.   -webkit-box-shadow: inset 0 0 1px 1px #00f2d6, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  28.   -moz-box-shadow: inset 0 0 1px 1px #00f2d6, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  29.   box-shadow: inset 0 0 1px 1px #00f2d6, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  30.   -webkit-text-shadow: 1px 1px 1px #00594f;
  31.   -moz-text-shadow: 1px 1px 1px #00594f;
  32.   -o-text-shadow: 1px 1px 1px #00594f;
  33.   text-shadow: 1px 1px 1px #00594f;
  34.   -webkit-border-radius: 32px;
  35.   -moz-border-radius: 32px;
  36.   border-radius: 32px;
  37.   padding: 12px 30px 12px 30px;
  38. }
  39.  
  40. .shiny-button strong {
  41.   letter-spacing: 1px;
  42.   font-size: 17px;
  43. }
  44.  
  45. .shiny-button:hover {
  46.   color: #FFFFFF;
  47.   background-color: #00ceb7;
  48.   background-image: -webkit-linear-gradient(top, #00d3bc 0%, #19dec8 48%, #00ceb7 49%, #00ceb7 82%, #00ead0 100%);
  49.   background-image: -moz-linear-gradient(top, #00d3bc 0%, #19dec8 48%, #00ceb7 49%, #00ceb7 82%, #00ead0 100%);
  50.   background-image: -o-linear-gradient(top, #00d3bc 0%, #19dec8 48%, #00ceb7 49%, #00ceb7 82%, #00ead0 100%);
  51.   background-image: linear-gradient(top, #00d3bc 0%, #19dec8 48%, #00ceb7 49%, #00ceb7 82%, #00ead0 100%);
  52.   border-color: hsl(173, 44%, 38%);
  53.   -webkit-box-shadow: inset 0 0 1px 1px #07ffe3, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  54.   -moz-box-shadow: inset 0 0 1px 1px #07ffe3, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  55.   box-shadow: inset 0 0 1px 1px #07ffe3, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  56.   -webkit-text-shadow: 1px 1px 1px #00685c;
  57.   -moz-text-shadow: 1px 1px 1px #00685c;
  58.   -o-text-shadow: 1px 1px 1px #00685c;
  59.   text-shadow: 1px 1px 1px #00685c;
  60. }
  61.  
  62. .shiny-button:active {
  63.   color: #FFFFFF;
  64.   background-color: #00b09b;
  65.   background-image: -webkit-linear-gradient(top, #00a692 0%, #00BFA9 100%);
  66.   background-image: -moz-linear-gradient(top, #00a692 0%, #00BFA9 100%);
  67.   background-image: -o-linear-gradient(top, #00a692 0%, #00BFA9 100%);
  68.   background-image: linear-gradient(top, #00a692 0%, #00BFA9 100%);
  69.   padding: 13px 30px 11px 30px;
  70. }
  71. </style>
  72.  
0
#2 29 апреля 2019 в 20:57
@noname,
также можно добавить
:active
и
:hover
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#3 29 апреля 2019 в 21:12
Проcто бы увеличить между ними расcтояние в строках и столбцах 
  1.  
  2. <a href="" class="shiny-button"><strong>Основной текст</strong><br>Доп текст</a>
  3. <a href="" class="shiny-button"><strong>Основной текст</strong><br>Доп текст</a>
  4. <a href="" class="shiny-button"><strong>Основной текст</strong><br>Доп текст</a>
  5. <a href="" class="shiny-button"><strong>Основной текст</strong><br>Доп текст</a>
  6. <a href="" class="shiny-button"><strong>Основной текст</strong><br>Доп текст</a>
  7. <a href="" class="shiny-button"><strong>Основной текст</strong><br>Доп текст</a>
  8. <a href="" class="shiny-button"><strong>Основной текст</strong><br>Доп текст</a>
  9. <a href="" class="shiny-button"><strong>Основной текст</strong><br>Доп текст</a>
  10.  
  11. <style>
  12. .shiny-button {
  13.   display: inline-block;
  14.   text-align: center;
  15.   border-width: 1px;
  16.   border-style: solid;
  17.   text-transform: uppercase;
  18.   text-decoration: none;
  19.   line-height: 1.1;
  20.   font-weight: normal;
  21.   font-family: sans-serif;
  22.   color: #FFFFFF;
  23.   font-size: 12px;
  24.   background-color: #00BFA9;
  25.   background-image: -webkit-linear-gradient(top, #00c4ae 0%, #17d1bb 48%, #00BFA9 49%, #00BFA9 82%, #00dbc2 100%);
  26.   background-image: -moz-linear-gradient(top, #00c4ae 0%, #17d1bb 48%, #00BFA9 49%, #00BFA9 82%, #00dbc2 100%);
  27.   background-image: -o-linear-gradient(top, #00c4ae 0%, #17d1bb 48%, #00BFA9 49%, #00BFA9 82%, #00dbc2 100%);
  28.   background-image: linear-gradient(top, #00c4ae 0%, #17d1bb 48%, #00BFA9 49%, #00BFA9 82%, #00dbc2 100%);
  29.   border-color: hsl(173, 45%, 37%);
  30.   -webkit-box-shadow: inset 0 0 1px 1px #00f2d6, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  31.   -moz-box-shadow: inset 0 0 1px 1px #00f2d6, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  32.   box-shadow: inset 0 0 1px 1px #00f2d6, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  33.   -webkit-text-shadow: 1px 1px 1px #00594f;
  34.   -moz-text-shadow: 1px 1px 1px #00594f;
  35.   -o-text-shadow: 1px 1px 1px #00594f;
  36.   text-shadow: 1px 1px 1px #00594f;
  37.   -webkit-border-radius: 15px;
  38.   -moz-border-radius: 15px;
  39.   border-radius: 15px;
  40.   padding: 12px 30px 12px 30px;
  41. }
  42.  
  43. .shiny-button strong {
  44.   letter-spacing: 1px;
  45.   font-size: 17px;
  46. }
  47.  
  48. .shiny-button:hover {
  49.   color: #FFFFFF;
  50.   background-color: #00ceb7;
  51.   background-image: -webkit-linear-gradient(top, #00d3bc 0%, #19dec8 48%, #00ceb7 49%, #00ceb7 82%, #00ead0 100%);
  52.   background-image: -moz-linear-gradient(top, #00d3bc 0%, #19dec8 48%, #00ceb7 49%, #00ceb7 82%, #00ead0 100%);
  53.   background-image: -o-linear-gradient(top, #00d3bc 0%, #19dec8 48%, #00ceb7 49%, #00ceb7 82%, #00ead0 100%);
  54.   background-image: linear-gradient(top, #00d3bc 0%, #19dec8 48%, #00ceb7 49%, #00ceb7 82%, #00ead0 100%);
  55.   border-color: hsl(173, 44%, 38%);
  56.   -webkit-box-shadow: inset 0 0 1px 1px #07ffe3, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  57.   -moz-box-shadow: inset 0 0 1px 1px #07ffe3, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  58.   box-shadow: inset 0 0 1px 1px #07ffe3, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  59.   -webkit-text-shadow: 1px 1px 1px #00685c;
  60.   -moz-text-shadow: 1px 1px 1px #00685c;
  61.   -o-text-shadow: 1px 1px 1px #00685c;
  62.   text-shadow: 1px 1px 1px #00685c;
  63. }
  64.  
  65. .shiny-button:active {
  66.   color: #FFFFFF;
  67.   background-color: #00b09b;
  68.   background-image: -webkit-linear-gradient(top, #00a692 0%, #00BFA9 100%);
  69.   background-image: -moz-linear-gradient(top, #00a692 0%, #00BFA9 100%);
  70.   background-image: -o-linear-gradient(top, #00a692 0%, #00BFA9 100%);
  71.   background-image: linear-gradient(top, #00a692 0%, #00BFA9 100%);
  72.   padding: 13px 30px 11px 30px;
  73. }
  74. </style>
  75.  
0
#5 29 апреля 2019 в 22:15
премиум компонент Биллинг ничто не может заменить v
0
#6 29 апреля 2019 в 23:52

убрал бы ссылки и добавил бы тень

@noname
Это надо тоже изменения вносить в файле css?
0
#7 30 апреля 2019 в 08:55
В html виджет вставить строки 2-25, цвет изменён на оранжевый, где закоменчено / / там изменения.
0
#8 30 апреля 2019 в 10:47
@Aliaksandr,
можете воспользоваться готовыми вариантами стилизации кнопок
shpargalkablog.ru/2012/04/css-knopki.html
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#10 30 апреля 2019 в 10:52
@Aliaksandr, код css к этим кнопкам
html5book.ru/krasivye-knopki-dlya-sayta/
https://red-ray.ru - Разработка шаблонов, дополнений для InstantCMS
0
#11 30 апреля 2019 в 10:55



Red Ray

Благодарю.
0
#12 30 апреля 2019 в 17:32 
  1.  
  2. <style>
  3. input.button4 {
  4.   position: relative;
  5.   display: inline-block;
  6.   font-family: Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif;
  7.   font-size: 1.5em;
  8.   font-weight: 700;
  9.   color: rgb(245,245,245);
  10.   text-shadow: 0 -1px rgba(0,0,0,.1);
  11.   text-decoration: none;
  12.   user-select: none;
  13.   padding: .3em 1em;
  14.   outline: none;
  15.   border: none;
  16.   border-radius: 3px;
  17.   background: #0c9c0d linear-gradient(#82d18d, #0c9c0d);
  18.   box-shadow: inset #72de26 0 -1px 1px, inset 0 1px 1px #98ff98, #3caa3c 0 0 0 1px, rgba(0,0,0,.3) 0 2px 5px;
  19.   -webkit-animation: pulsate 1.2s linear infinite;
  20.   animation: pulsate 1.2s linear infinite;
  21. }
  22. input.button4:hover {
  23.   -webkit-animation-play-state: paused;
  24.   animation-play-state: paused;
  25.   cursor: pointer;
  26. }
  27. input.button4:active {
  28.   top: 1px;
  29.   color: #fff;
  30.   text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;
  31.   box-shadow: 0 -1px 3px rgba(0,0,0,.3), 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
  32. }
  33. @-webkit-keyframes pulsate {
  34.   50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;}
  35. }
  36. @keyframes pulsate {
  37.   50% {color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff;}
  38. }
  39. </style>
  40.  
  41. <input type="button" class="button4" value="Купить">
  42. <input type="button" class="button4" value="Купить">
  43. <input type="button" class="button4" value="Купить">
  44.  
0
Кнопки html, растянуть по разм
Как вывести описание категории
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Кнопки html, растянуть по размеру окна.

HTML / CSS / PHP / JS / RegExp Создана 4 года назад 18 сообщений

[ЕСТЬ РЕШЕНИЕ] Социальные кнопки html не видны с мобильных устройств

HTML / CSS / PHP / JS / RegExp Создана 2 года назад 4 сообщения

Кнопки поделится, соц сети для instant 2

Разработка и тестирование Создана 4 года назад 3 сообщения

Пропала вверху кнопка редактировать

Релизы 2.X Создана 4 года назад 4 сообщения

Глупый вопрос(продолжение): Кнопки "Сохранить" в backend

Разработка дополнений Создана 3 года назад 11 сообщений

[ЕСТЬ РЕШЕНИЕ] Скрыть кнопку подписки от пользователей

Вопросы настройки InstantCMS Создана 1 год назад 7 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.