Как я меняю внешний вид кнопки HTML и копирую portapeles (Clipboardjs.com)?

Проблема, которая у меня есть, состоит в том, что я хочу сделать кнопку, копирования текста в пюпитр в виде дощечки с зажимом на моей веб-странице, но кнопка оказывается такой:

introducir la descripción de la imagen aquí

И я хочу, чтобы оказался немного таким, который я схватил:

introducir la descripción de la imagen aquí
(переместив мышь, сверху изменяет цвет до небесного тона блик)

Код HTML, который я использую, - Clipboardjs.com




    
    target-div
    


    
    
hello

Я надеюсь, что кто-то знает решение. Спасибо.

8
задан 11.11.2016, 00:38
3 ответа

AquГ - у тебя есть один botГіn со стилем и твоим IP.

Просто это прикрепляет в печатающем HTML:

<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>
<button class="btn" data-clipboard-text="mc.bladecraftsv.net" style="
    font-size: 18px;
    background: #eb374b;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 25px;
    text-transform: uppercase;
    margin-left: 20px;
"><div>mc.bladecraftsv.net</div><div style="
    font-size: 11px;
    font-family: arial;
    text-transform: uppercase;
">Click para copiar</div></button>
3
ответ дан 24.11.2019, 12:39
  • 1
    Это я funcionó совершенный genioooo. Love U Сесар Моро: v.! Я меняюсь и отрезаю! –  Nerraden 11.11.2016, 19:42

Добавь изображение и redimensiona кнопка применяя к нему стиль этой формы:

<html>
<head>
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js"></script>
</head>
<body>
    <button class="btn" data-clipboard-text="mc.bladecraftsv.net" style="background-image:url('https://i.stack.imgur.com/I4YJo.png');width:240px;height:49px;"></button>
    <script>var clipboard = new Clipboard('.btn')</script>
</body>
</html>

Хотя лучше иметь отдельные стили как говорит @Cig. Я добавил также функциональность, которую ты просишь Clipboardjs.com.

2
ответ дан 24.11.2019, 12:39
  • 1
    Комментарии не должны быть использованными для распространенных дискуссий; эта conversació n был , перемещенной в чат . –   11.11.2016, 06:45
  • 2
    Пожалуйста используй созданный зал чата, не добавляй má s комментарии. –   11.11.2016, 20:21
  • 3
    Возможно входить в чат с 20 и уже у него есть они. –   11.11.2016, 20:26

Для этого наметка с css ты можешь использовать лист css отдельно или прямо с HTML посредством этикеток <style type="text/css"></style> внутри этикеток <head></head> из твоего документа и javascript внутри этикеток <script type="text/javascript"></script>

var copyTextareaBtn = document.querySelector('.btn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();

  try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
  } catch (err) {
console.log('Oops, unable to copy');
  }
});
 .botonimagen{
          background-image:url('https://i.stack.imgur.com/I4YJo.png');
          background-repeat:no-repeat;
          height:49px;
          width:240px;
          background-position:center;

        }
        .botonimagen:hover{
          opacity: .9;
        }
        .hidden{display:none;}
<textarea class="js-copytextarea hidden">mc.bladecraftsv.net</textarea>
<button class="btn botonimagen"></button>
1
ответ дан 24.11.2019, 12:39
  • 1
    Здравствуйте. Спасибо за ответ. ¿ Но có mo я ввожу этот có я говорю CSS вместе с có говорит botó n? Привет –  Nerraden 10.11.2016, 23:06
  • 2
    Уже издайте ответ @Nerraden –  cignius 10.11.2016, 23:11
  • 3
    Я не заканчиваю тем, что понимаю. Я начинающий в этом. Я explicarí эксперт có mo вводить это, и что шел? Давайте говорить, я inserté có я говорю, что ты поместил в моем Вебе в части HTML используя их < style> но он не появляется ningú n botó n. –  Nerraden 10.11.2016, 23:16
  • 4
    @Nerraden я вновь издавал ответ для сейчас сделай clipboard, не занимая этого книжного магазина xD –  cignius 11.11.2016, 02:18
  • 5
    Я остаюсь, не понимая dó nde помещать có я говорю xD. Давайте говорить, у меня есть 4 секции, такой редактор как нормальный текст, как такой HTML, как CSS и как язык сценариев JavaScript, ты переместил меня 3 có digos в отдельных секциях, pegué 2 первых có digos в части CSS и ú ltimo в той HTML. Я принес пользу? Потому что не quedó ningú n botó n, совсем не má s квадрат, чтобы писать, что он говорит " Что-то для copiar". –  Nerraden 11.11.2016, 02:25

Теги

Похожие вопросы