CODEWITHSUNDEEP
javascripthtmlcss
BPL
BPL

Reputation: 9863

How to avoid icon-button to remain selected?

I'd like to learn how to create icon-buttons without the help of any external library (just pure css/html/js), below you'll find my first failed attempt:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url("fonts/icons.woff2");
}

.icons {
    font-family: 'Material Icons';
    font-size: 24px;
}

.icon-button {
    border-radius: 5px;
    border: 0;
    color: #555;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition:
        box-shadow .25s ease,
        background .25s ease,
        transform .25s ease;
    background: #ffffffdd;
}

.icon-button:hover {
    color: #e92e73ff;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.35);
}

.icon-button:active {
    background: #ffffffaa;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35);
    transform: scale(0.9);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
    <button class="icons icon-button">info</button>
</body>

</html>

As you can see, problem with this attempt is after clicking, the button will remain selected with that borderline around and I'd like to prevent that.

For instance, if I decided to use materializecss achieving the effect I want would be as simple as just doing this:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
    <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>
</body>

</html>

So yeah, my question... how can i achieve a similar effect without using any external library?

Upvotes: 2

Views: 459

Answers (2)

Cristian Sarghe
Cristian Sarghe

Reputation: 790

You need to add outline: none; to the button.

Generally, buttons have predefined styles you need to overwrite such as border, background, font-family and also outline.

Upvotes: 2

Always Helping
Always Helping

Reputation: 14570

You can use normal CSS to to archive. Just remove the outline and border from it and the :focus

.icon-button:focus {
  outline: none;
  box-shadow: none;
}

Run snippet below to see it in action.

function clicked() {
  console.log('I am clicked')
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url("fonts/icons.woff2");
}

.icons {
  font-family: 'Material Icons';
  font-size: 24px;
}

.icon-button {
  border-radius: 5px;
  border: 0;
  color: #555;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: box-shadow .25s ease, background .25s ease, transform .25s ease;
  background: #ffffffdd;
}

.icon-button:hover {
  color: #e92e73ff;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.35);
}

.icon-button:active {
  background: #ffffffaa;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35);
  transform: scale(0.9);
}

.icon-button:focus {
  outline: none;
  box-shadow: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
  <button class="icons icon-button" onclick="clicked()">info</button>
</body>

</html>

Upvotes: 2

Related Questions