HTML CSS: превратить Google Icon в кнопку без прямоугольника - PullRequest
Новая
       27

HTML CSS: превратить Google Icon в кнопку без прямоугольника

0 голосов
/ 07 июля 2019

Как превратить значок Google в кнопку?Однако не нужно прямоугольную рамку вокруг кнопки.Пиксели значка будут самой кнопкой. 

.testdelete {
     font-family: Material Icons;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<span class="testdelete">
 delete
</span>

Ссылка ниже помещает прямоугольник вокруг кнопки, что-то не нужно.

https://www.w3schools.com/howto/howto_css_icon_buttons.asp

Ответы [ 3 ]

2 голосов
/ 07 июля 2019

Почему бы не использовать тег для имитации кнопки? 

$( ".testdelete" ).click(function() {
  $("p").hide();
});
.testdelete {
     font-family: Material Icons;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">



<a class="testdelete">
 delete
</a>

<p class="hi">To be deleted</p>

Вы также можете использовать <button>tweet</button> и обрабатывать удаление фона и границ с помощью css: 

.button {
background: none;
border: none;
color: black;
}
0 голосов
/ 07 июля 2019

Попробуйте: - 

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <meta charset="utf-8"/>
        <title>Icons</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <i class="fa fa-bars">This a icon without a parent box</i>
    </body>
</html>
0 голосов
/ 07 июля 2019

HTML: 

<a href="#" class="button">

Твиттер!

style.css: 

.button { 
font-family: Material Icons;
vertical-align:middle; 
cursor: pointer; 
}

.text:hover{  
cursor: pointer; 
}
...