Виджет "КНОПКА БАБЛО" 2.X

Посетитель

Сообщений: 357

1 5 июня 2020 в 00:19

Нужен виджет "Кнопка бабло"
1. не плоская
2. чтоб стеклянная была с гранями, выпуклая.
3. чтоб можно было выбрать цвет текста на кнопке
4. чтоб можно было указать ссылку куда кнопа ведёт
5. чтоб можно было ввести текст на этой кнопе
6. чтоб можно было выбрать цвет кнопы (выпуклой, стеклянной, с гранями)
7. чтоб можно было выбрать растянуть её на 100% ширины блока или по размеру надписи на кнопке
P.s. По дизайну корочь - она должна быть реально стеклянная чтоб было видно её, чтоб хотелось нажать, моргать перелеваться... я хз как, предлагайте варианты, естественно "бесплатная хотелка".

AndroS

Посетитель

Сообщений: 2553

2 5 июня 2020 в 00:24

Колян, не проще сгенерировать в любом онлайн-сервисе и вставить в виджет html-блока?

https://cooltext.com/Logo-Design-Love как пример

Вкусные цены на NVME Win-сервера, Недорогие VPS с бесплатным администрированием!
Удобный и гибкий автопостинг в соцсети

Колян

Посетитель

Сообщений: 357

3 5 июня 2020 в 00:34

AndroS:

Сейчас попробую, отпишу как оно вышло...

Колян

Посетитель

Сообщений: 357

4 5 июня 2020 в 02:17

AndroS:

Ну выдаёт сервис гифку, ЧО мне с ней делать? Хде сервис?

AndroS

Посетитель

Сообщений: 2553

5 5 июня 2020 в 02:31

Колян:

ЧО мне с ней делать?

Любуйтесь! Красивая же? laugh

Ежели серьезно - для начала загрузите на сайт, потом загуглите "html вставка картинки" и действуйте!

Колян:

Хде сервис?

Какой сервис, вы о чем?

Скрытый текст виден только зарегистрированным пользователям

Lora

Посетитель

Сообщений: 1694

6 5 июня 2020 в 11:38

Колян:

естественно "бесплатная хотелка".

Почему естественно? ИМХО за такие настройки совсем Не естетственно).

vikont

Посетитель

Сообщений: 2934

7 5 июня 2020 в 22:06

Колян:

AndroS:

Ну выдаёт сервис гифку, ЧО мне с ней делать? Хде сервис?

Надо поискать. Натыкался на сервисы, которые генерят не картинку, а HTML код картинки и в нем все параметры, которые вам нужны.

Мощный хостинг на NVMе дисках с защитой! Дешевые домены здесь! Автоботы для соцсетей

Алексей

Посетитель

Сообщений: 3868

8 5 июня 2020 в 23:20

Тут много
http://shpargalkablog.ru/2012/04/css-knopki.html
Скоро будет компонент шорткодами можно любую кнопку ставить в любое место, и не только кнопки

Редактировалось: 1 раз (Последний: 5 июня 2020 в 23:21)

Мой сайт | Конструктор тем | Уроки по конструктору тем Мой канал

Колян

Посетитель

Сообщений: 357

9 6 июня 2020 в 14:44

Алексей Тимофеев:

Годно, моякните мне как будет готов компонент.

Заралик

Посетитель

Сообщений: 957

10 6 июня 2020 в 14:50

Код PHP:

 В стили - 
a.button9 {
  position: relative;
  display: inline-block;
  color: #777674;
  font-weight: bold;
  text-decoration: none;
  text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
  user-select: none;
  padding: 1em 2em;
  outline: none;
  border-radius: 3px / 100%;
  background-image:
   linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%),
   linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)),
   linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
  background-repeat: no-repeat;
  background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
  background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
  box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
}
a.button9:hover {
  transition: .5s linear;
  background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
}
a.button9:active {
  top: 1px;
}
 это туда куда надо.
<a href="#" class="button9"> кнопка ,БАБЛО</a>

Она стеклянная!