1

How do I make a Google Icon into a Button? However, do not want a rectangular box around the button. The icon pixels will be a button itself.

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

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

Link below places a rectangle around button, something don't want.

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

jerrythomas38
  • 759
  • 2
  • 16
  • 41

3 Answers3

2

Why not use an tag to simulate a button? 

$( ".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>

You can also use <button>tweet</button> and handle the background and border removal with css:

.button {
background: none;
border: none;
color: black;
}
João Teixeira
  • 119
  • 1
  • 12
  • How it doesn't work? I gave it a dummy function the hide the

    below, you can pass whatever function! In any case you can also use and remove the background and border, I will update my answer.

     – João Teixeira Jul 07 '19 at 21:05
  • thanks, is there anyway to conduct this with CSS / html? trying to refrain from js unless needed – jerrythomas38 Jul 07 '19 at 23:18
  • Yes, I've updated my answer! Be aware that if you're performing actions (delete in this case) in the database, html and css won't be enough. I need to either make a request to the server via ajax (better user experience) or for example through PHP. – João Teixeira Jul 08 '19 at 09:55
0

html:

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

TWEET!

style.css:

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

.text:hover{  
cursor: pointer; 
}
João Teixeira
  • 119
  • 1
  • 12
Earl Daniel Villanueva
  • 1
  • 1
  • can we try it for the simple delete icon above in question? seems like this has a lot of animation effects not needed, looking for bare simple answer, thanks – jerrythomas38 Jul 07 '19 at 20:40
0

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>