Home > other >  Button border not working well when hovered
Button border not working well when hovered

Time：03-04

I'm practicing HTML and CSS, and want to create a button. I want a colored border appear around the button when hovered. However, I'm somehow stuck and can't get something right. The border doesn't appear quite around the button, as well as not showing up completely. I'd appreciate it if somebody could kindly help me figure out what I'm doing wrong and give a solution to fix it.

@import url(https://fonts.googleapis.com/css?family=Source Sans Pro);
h1 {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  padding-top: 20px;
  color: #000;
}

h2 {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  color: #999;
}

.button {
  width: 200px;
  margin: 100px auto;
  position: relative;
  border: solid 2px #cbd4d9;
  height: 55px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /*border: solid green;*/
}
.button:hover .hoverBtn:before, .button:hover .hoverBtn:after {
  opacity: 1;
  -webkit-animation: openB 0.4s;
  /* Chrome, Safari, Opera */
  animation: open 0.4s;
  animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(0.39, 0.575, 0.565, 1) ;
  animation-direction:normal;
  border: solid yellow;
}
.button:hover .hoverBtn-bottom:before, .button:hover .hoverBtn-bottom:after {
  opacity: 1;
  -webkit-animation: open 0.4s;
  /* Chrome, Safari, Opera */
  animation: openB 0.4s;
  animation-delay: 0.4s;
  animation-fill-mode:forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  /*border: solid pink;*/
}
.button h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  color: #587785;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 22px;
  line-height: 55px;
}

.hoverBtn {
  width: 100%;
  height: 55px;
  position: absolute;
  top: -1px;
}
.hoverBtn:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-left: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  right: 100px;
  
}
.hoverBtn:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-right: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 100px;
}

.hoverBtn-bottom {
  width: 100%;
  height: 55px;
  position: absolute;
  /*border: solid blue;*/
  top: 0px;

}
.hoverBtn-bottom:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display:block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  right: 0;
}
.hoverBtn-bottom:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  left: 0;
}

h2.credits {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  color: #888;
  font-size: 16px;
}

/*


*/

@keyframes open {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 100px;
    height: 0px;
  }
  100% {
    width: 100px;
    height: 55px;
  }
}

@keyframes openB {
  0% {
    width: 0px;
  }
  100% {
    width: 100px;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="border.css">
    <title>Border</title>
</head>
<body>
    <h1>Hover Border Animation</h1>

  <div >
    <h2 >Hobbies</h2>
    <br>
    <div ></div>
    <div ></div>
  </div>

</body>
</html>

Thank you in advance.

CodePudding user response：

The simplest solution would be to replace display: block; with display: inline-block; on both .hoverBtn:before and :after. This fixes the alignment, then you can remove the middle borders by splitting the styles with the border yellow (.button:hover .hoverBtn:before, .button:hover .hoverBtn:after) into two different styles, then remove the border-right on before and remove the border-left on after.

See the CSS changes I made below:

@import url(https://fonts.googleapis.com/css?family=Source Sans Pro);
h1 {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  padding-top: 20px;
  color: #000;
}

h2 {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  color: #999;
}

.button {
  width: 200px;
  margin: 100px auto;
  position: relative;
  border: solid 2px #cbd4d9;
  height: 55px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /*border: solid green;*/
}

.button:hover .hoverBtn:before {
  opacity: 1;
  -webkit-animation: openB 0.4s;
  /* Chrome, Safari, Opera */
  animation: open 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  border: solid yellow;
  border-right: none;
  width: 200px;
}

.button:hover .hoverBtn:after {
  opacity: 1;
  -webkit-animation: openB 0.4s;
  /* Chrome, Safari, Opera */
  animation: open 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  border: solid yellow;
  border-left: none;
  width: 200px;
}

.button:hover .hoverBtn-bottom:before,
.button:hover .hoverBtn-bottom:after {
  opacity: 1;
  -webkit-animation: open 0.4s;
  /* Chrome, Safari, Opera */
  animation: openB 0.4s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
  /*border: solid pink;*/
}

.button h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  color: #587785;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 22px;
  line-height: 55px;
}

.hoverBtn {
  width: 100%;
  height: 55px;
  position: absolute;
  top: -1px;
}

.hoverBtn:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: inline-block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-left: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  right: 100px;
}

.hoverBtn:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: inline-block;
  opacity: 0;
  border-top: solid 2px #517180;
  border-right: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 100px;
}

.hoverBtn-bottom {
  width: 100%;
  height: 55px;
  position: absolute;
  /*border: solid blue;*/
  top: 0px;
}

.hoverBtn-bottom:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-right-radius: 5px;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  right: 0;
}

.hoverBtn-bottom:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 55px;
  border-bottom: solid 2px #517180;
  -webkit-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  left: 0;
}

h2.credits {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  color: #888;
  font-size: 16px;
}


/*


*/

@keyframes open {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 100px;
    height: 0px;
  }
  100% {
    width: 100px;
    height: 55px;
  }
}

@keyframes openB {
  0% {
    width: 0px;
  }
  100% {
    width: 100px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="border.css">
  <title>Border</title>
</head>

<body>
  <h1>Hover Border Animation</h1>

  <div >
    <h2 >Hobbies</h2>
    <br>
    <div ></div>
    <div ></div>
  </div>

</body>

</html>

Page link：https//www.codepudding.com/other/322556.html

Prev:How would I create buttons so that they are in a line with all other buttons?
Next:Change image after onclick on icon
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding