Home > Software engineering >  link button has an underline that cannot be removed, and icon turns red when clicked
link button has an underline that cannot be removed, and icon turns red when clicked

Time：08-15

I made a "button" well... not really, I made a link that redirects the user to my 'whatever' page or whatever. problem is, it has an annoyying underline that cannot be removed even when i try puttin in CSS text-decoration: none; why is it happening? how can i remove it? also, whenever i click on the button, the LinkedIn icon turns red.. the button is purple and it makes it ugly.. how can i remove the red color when clicked? when i am hovering next to the box in the 'peticide' chrome extention, i noticed a red line is it related somehow?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.title h1 {
  font-size: 36px;
  font-family: "Lato", sans-serif;
  margin-top: 90px;
  margin-left: 860px;
  margin-right: 10px;
  text-align: center;

  /* !!!! !!!! Styling the text and giving it gradient *מדרון* !!!! !!!!*/
  color: #ffffff;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);

  /* Make sure text is infront of background images */
  display: block;
  position: relative;
  z-index: 3;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {  
    background-position: -10000px 5000px;
  }
}

@keyframes move-clouds-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10000px 0;
  }
}

.stars,
.twinkling,
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stars {
  background: #000 url(stars.png) repeat top center;
  z-index: 0;
}

.twinkling {
  background: transparent url(twinkling.png) repeat top center;
  z-index: 1;
  animation: move-twink-back 200s linear infinite;
}

.clouds {
  background: transparent url(clouds.png) repeat top center;
  z-index: 2;
  opacity: 0.4;
  animation: move-clouds-back 200s linear infinite;
}
.secondarytitle,
h2 {
  font-size: 63px;
  font-weight: 500;
  letter-spacing: 5px;
  cursor: pointer;
  font-family: "Lato", sans-serif;
  margin-top: 90px;
  margin-left: 705px;
  margin-right: 10px;
  text-align: center;
  color: #ffffff;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  display: block;
  position: absolute;
  z-index: 3;
}

body {
  display: flex;
  min-height: 100vh;
}
.secondarytitle,
h2 span {
  transition: 0.5s;
}
.secondarytitle,
h2:hover span:nth-child(1) {
  margin-right: 28px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
  margin-right: 10px;
}

.secondarytitle,
h2:hover span:nth-child(2)::after {
  content: "";
  margin-left: 10px;
}
.secondarytitle,
h2:hover span {
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
    0 0 120px #fff;
}
table,
tr,
td,
th{
  color: #ffffff;
  background: -webkit-linear-gradient(#eee, #333);
  font-family: "Lato", sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  position: absolute;
  font-size: 24px;
  font-weight: 600;
}
.tabledata{
top: 400px;
left: 231px;
width: 1200px;
height: 550px;
-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;

}
.button{
  font-size: 27px;
  font-weight: 800px;
  top: 896px;
  left: 1233px;
  width: 248px;
  height: 46px;
  color: #ffffff;
  letter-spacing: 4px;
  background: -webkit-linear-gradient(#eee, #333);
  font-family: "consolas", sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 3;
  position: absolute;
  transition: 1.7s;
  text-decoration: none;
  overflow: hidden;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}
.button:hover
{
  color: #ffffff;
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff, 0 0 80px #ffffff;
  transition-delay: 0.05s;
}



.secondaryButton{
  font-size: 27px;
  font-weight: 800px;
  top: 896px;
  left: 236px;
  width: 197px;
  height: 50px;
  color: #ffffff;
  letter-spacing: 4px;
  background: -webkit-linear-gradient(#eee, #333);
  font-family: "consolas", sans-serif;
  -webki
<div >
          <a href="/project2/contact.html">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          contact me
          </div>
          <div >
              <a href="https://www.linkedin.com/in/blah-blah/">
                  <span></span>
              <span></span>
              <span></span>
              <span></span>
              linkedIn<ion-icon name="logo-linkedin"></ion-icon>
              </div>

CodePudding user response：

your underline is on a link so you have to remove text-decoratuon on a tag. then on a tag :focus change your color. Look at code below if thats help you.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.title h1 {
  font-size: 36px;
  font-family: "Lato", sans-serif;
  margin-top: 90px;
  margin-left: 860px;
  margin-right: 10px;
  text-align: center;

  /* !!!! !!!! Styling the text and giving it gradient *מדרון* !!!! !!!!*/
  color: #ffffff;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);

  /* Make sure text is infront of background images */
  display: block;
  position: relative;
  z-index: 3;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }
  to {  
    background-position: -10000px 5000px;
  }
}

@keyframes move-clouds-back {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10000px 0;
  }
}

.stars,
.twinkling,
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stars {
  background: #000 url(stars.png) repeat top center;
  z-index: 0;
}

.twinkling {
  background: transparent url(twinkling.png) repeat top center;
  z-index: 1;
  animation: move-twink-back 200s linear infinite;
}

.clouds {
  background: transparent url(clouds.png) repeat top center;
  z-index: 2;
  opacity: 0.4;
  animation: move-clouds-back 200s linear infinite;
}
.secondarytitle,
h2 {
  font-size: 63px;
  font-weight: 500;
  letter-spacing: 5px;
  cursor: pointer;
  font-family: "Lato", sans-serif;
  margin-top: 90px;
  margin-left: 705px;
  margin-right: 10px;
  text-align: center;
  color: #ffffff;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  display: block;
  position: absolute;
  z-index: 3;
}

body {
  display: flex;
  min-height: 100vh;
}
.secondarytitle,
h2 span {
  transition: 0.5s;
}
.secondarytitle,
h2:hover span:nth-child(1) {
  margin-right: 28px;
}
.secondarytitle,
h2:hover span:nth-child(2)::after {
  margin-right: 10px;
}

.secondarytitle,
h2:hover span:nth-child(2)::after {
  content: "";
  margin-left: 10px;
}
.secondarytitle,
h2:hover span {
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
    0 0 120px #fff;
}
table,
tr,
td,
th{
  color: #ffffff;
  background: -webkit-linear-gradient(#eee, #333);
  font-family: "Lato", sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
  position: absolute;
  font-size: 24px;
  font-weight: 600;
}
.tabledata{
top: 400px;
left: 231px;
width: 1200px;
height: 550px;
-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;

}
.button{
  font-size: 27px;
  font-weight: 800px;
  top: 896px;
  left: 1233px;
  width: 248px;
  height: 46px;
  color: #ffffff;
  letter-spacing: 4px;
  background: -webkit-linear-gradient(#eee, #333);
  font-family: "consolas", sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 3;
  position: absolute;
  transition: 1.7s;
  text-decoration: none;
  overflow: hidden;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}

.button a, .secondaryButton a {text-decoration: none; }

 a:focus {color: gray;}

.button:hover
{
  color: #ffffff;
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff, 0 0 80px #ffffff;
  transition-delay: 0.05s;
}



.secondaryButton{
  font-size: 27px;
  font-weight: 800px;
  top: 10px;
  left: 236px;
  width: 197px;
  height: 50px;
  color: #ffffff;
  letter-spacing: 4px;
  background: -webkit-linear-gradient(#eee, #333);
  font-family: "consolas", sans-serif;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2);
  z-index: 4;
  position: absolute;
  transition: 1.7s;
  text-decoration: none;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
  
}
.secondaryButton:hover
{
  color:  rgb(165, 70, 254);
  background: rgb(188, 123, 248);
  box-shadow: 0 0 10px  rgb(165, 70, 254), 0 0 40px  rgb(165, 70, 254), 0 0 80px  rgb(165, 70, 254);
  transition-delay: 0.05s;
}
<div >
          <a href="/project2/contact.html">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          contact me</a>
          </div>
          <div >
              <a href="https://www.linkedin.com/in/blah-blah/">
                  <span></span>
              <span></span>
              <span></span>
              <span></span>
              linkedIn<ion-social-icon name="logo-linkedin">
              </div>

CodePudding user response：

Set the CSS of your tag like this

For example:

<a href='xyx.com' class='style'>

CSS

.style{
text-decoration:none
 }

CodePudding user response：

Just add your child selector a to the button classes so your button classes are targeting the anchor element...

.button a{
...
}

.button a:hover
{
...
}

.secondaryButton a{
...
}

A better solution is to remove the div wrappers and move your class into the anchor tag directly and also beef up your anchor CSS selectors with pseudo-classes as shown below so you have more granular control of your links.

.button,
.button:link,
.button:visited,
.button:focus,
.button:active{
...
}

.button:hover
{
...
}

.secondaryButton,
.secondaryButton:link,
.secondaryButton:visited,
.secondaryButton:hover,
.secondaryButton:focus,
.secondaryButton:active{
...
}


<a  href="/project2/contact.html">contact me</a>
<a  href="https://www.linkedin.com/in/blah-blah/">linkedIn</a>

'''

Page link：https//www.codepudding.com/Softwareengineering/510781.html

Prev:How to change flex column width while keeping item centered
Next:Having problems formatting a nav bar
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding