Question 246550 in Html Question posted in
Some basic documentation can be found here.

Html – How to change an Icon when on hover?

I am creating a login button, this one initially has a closed padlock icon, I would like when the pointer was on it (so on hover) this icon changes to the one that has the padlock open.
This would be the main need.

Then if any of you have any ideas on how to use a padlock icon that animates to open when on hover would be even better.

I have tried searching online but can’t find anything that can help me :/
I will leave the code below.

HTML:

<header class="header">
      <div class="header-box row">
        <div class="header-logo-box">
          <img
            src="/HeavenBoost.net/HeavenBoost.png"
            alt=""
            class="header-logo"
          />
        </div>
        <button type="button" class="nav-toggler">
          <span></span>
        </button>
        <nav class="nav">
          <ul class="head-ul">
            <div>
              <li class="head-li"><a href="" class="head-a">Home</a></li>
              <li class="head-li"><a href="" class="head-a">Shop</a></li>
              <li class="head-li"><a href="" class="head-a">Support</a></li>
              <li class="head-li"><a href="" class="head-a">Terms</a></li>
            </div>
            <div class="buttons-mobile desktop-hide">
              <a href="#" class="head-btn-a-mobile head-1st-btn-mobile"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth="{1.5}"
                  stroke="#fff"
                  className="w-6 h-6"
                  class="head-icon"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
                  />
                </svg>
                Login</a
              >
              <a href="#" class="head-btn-a-mobile head-1st-btn-mobile"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth="{1.5}"
                  stroke="#fff"
                  className="w-6 h-6"
                  class="head-icon"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
                  />
                </svg>
                Buy</a
              >
            </div>
          </ul>
        </nav>
        <div class="buttons mobile-hide">
          <a href="#" class="head-btn-a head-1st-btn"
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth="{1.5}"
              stroke="#fff"
              className="w-6 h-6"
              class="head-icon"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
              />
            </svg>
            Login</a
          >
          <a href="#" class="head-btn-a head-2nd-btn"
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth="{1.5}"
              stroke="#fff"
              className="w-6 h-6"
              class="head-icon"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
              />
            </svg>
            Buy</a
          >
        </div>
      </div>
    </header>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #212529;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1;
  font-weight: 400;
  background-color: #141414;
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #4186d7;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  width: 10px;
  width: 10px;
}
*::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #141414;
}

*::-webkit-scrollbar-track:hover {
  background-color: #141414;
}

*::-webkit-scrollbar-track:active {
  background-color: #141414;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #4186d7;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #4186d7;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #4186d7;
}
/**********************/
/*GENERAL COMPONENTS*/
/**********************/

.desktop-hide {
  display: none;
  visibility: hidden;
}

a,
li {
  list-style: none;
  text-decoration: none;
  display: inline-block;
}

button {
  display: inline-block;
}

/**********************/
/*HEADER SECTION*/
/**********************/

/*header*/
.header {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  max-height: 9.6rem;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 999;
  padding: 2.4rem 2.4rem 0 2.4rem;
  z-index: 999;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 128rem;
  margin: 0 auto;
  padding: 2.4rem 4.8rem;
  border-radius: 2.4rem;
  border: 1px solid #4186d7;
  backdrop-filter: blur(10px);
  background-color: rgba(20, 20, 20, 0.8);
  z-index: 999;
}

.header-logo-box {
  max-width: 18rem;
}
.header-logo {
  width: 100%;
}

.head-ul {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

.head-a {
  padding: 0.8rem 1.6rem;
  border-radius: 0.6rem;
  transition: all 0.3s;
  font-size: 1.4rem;
}

.head-a:link {
  color: #fff;
}
.head-a:visited {
  color: #fff;
}
.head-a:hover {
  color: #fff;
  background-color: #4186d7;
}
.head-a:active {
  color: #fff;
  background-color: #3b79c2;
}
.buttons {
  font-size: 1.4rem;
  display: flex;
  gap: 0.8rem;
}

.head-icon {
  width: 2.4rem;
}

.head-btn-a {
  padding: 1.6rem 2.4rem;
  border-radius: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: all 0.3s;
}
.head-btn-a:link {
  font-size: 1.4rem;
  color: #fff;
}
.head-btn-a:visited {
  font-size: 1.4rem;
  color: #fff;
}
.head-btn-a:hover {
  font-size: 1.4rem;
  color: #fff;
}
.head-btn-a:active {
  font-size: 1.4rem;
  color: #fff;
}

.head-2nd-btn {
  background-color: #5492db;
}
.head-2nd-btn:hover {
  background-color: #3b79c2;
}
.mainb {
  padding-left: 5rem;
  padding-right: 5rem;
}
.nav-toggler {
  height: 34px;
  width: 44px;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  display: none;
}

.nav-toggler span {
  height: 2px;
  width: 20px;
  background-color: #fff;
  display: block;
  margin: auto;
  position: relative;
  transition: all 0.3s ease;
}
.nav-toggler.active span {
  background-color: transparent;
}
.nav-toggler span::before,
.nav-toggler span::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: all 0.3s ease;
}
.nav-toggler span::before {
  transform: translateY(-6px);
}
.nav-toggler.active span::before {
  transform: rotate(45deg);
}
.nav-toggler span::after {
  transform: translateY(6px);
}
.nav-toggler.active span::after {
  transform: rotate(135deg);
}
@media (max-width: 991px) {
  .mobile-hide {
    display: none;
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .align-items-center {
    align-items: center;
  }
  .justify-content-between {
    justify-content: space-between;
  }
  .nav-toggler {
    display: block;
  }
  .header .nav {
    width: 100%;
    padding: 0;
    max-height: 0px;
    overflow: hidden;
    visibility: hidden;
    transition: all 0.5s ease;
  }
  .header .nav.open {
    visibility: visible;
  }
  .header .nav ul {
    display: flex;
    flex-direction: column;
    padding: 1.8rem 0 0;
    margin-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .head-a {
    padding: 0.8rem 1.6rem;
    border-radius: 0.6rem;
    transition: all 0.3s;
    font-size: 1.4rem;
  }
  .header .nav ul li {
    display: block;
    margin: 0;
  }
}

Icon pack currently in use: https://heroicons.com/

Tags:

2

Answers


  1. 0

    you can change the fill property of an svg through css when you hover over a link

    Login or Signup to reply.
  2. 0

    Firstly, you have to add the open padlock icon on the HTML with CSS property as display none and show this icon on hover while hiding the close padlock.

    .head-1st-btn:hover .lock-icon {
  display: none;
}
.unlock-icon {
  display: none;
}
.head-1st-btn:hover .unlock-icon {
  display: inline;
}

    Below is the CSS and HTML that I have added,
    Please follow the link below:

    Code with Working Example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search