ameran

Is anyone who might have an answer to my question? I really appreciate your help.

Hi,

I am new in this forum and firstly, I wanted to say thank you for such great community.

I have started to learn CSS. I see it is really challenging. I wrote down a HTML/CSS code for a rollover button. I like to combine this with UIkit Toggle function that I can hide/unhide text or portion of a website, but I could not come up with any solution. I pasted my HTML and CSS code below. I hope you guys can let me know how to modify my code to be able to hide/unhide things, when I click on it. I really appreciate your help. 

HTML:

<a href="" class="button">everyone</a><br>

CSS:

.button {
  background: #fff;
  color: #000;
  padding: 2px 12px 6px 50px;
  position: relative;
  text-decoration: none;
}

.button::before {
  border: 1px solid #000;
  content: "";
  left: 1px;
  position: absolute;
  top: 12px;
  height: 8px;
  width: 8px;
}

.button:hover, 
.button:active {
  font-weight: bold;
}

.button:hover::before,
.button:active::before {
  background: #000;
  top: 8px;
  left: -4px;
  height: 19px;
  width: 19px;
}

Best,

Amir

Hi,

I am new in this forum and firstly, I wanted to say thank you for such great community.

I have started to learn CSS. I see it is really challenging. I wrote down a HTML/CSS code for a rollover button. I like to combine this with UIkit Toggle function that I can hide/unhide text or portion of a website, but I could not come up with any solution. I pasted my HTML and CSS code below. I hope you guys can let me know how to modify my code to be able to hide/unhide things, when I click on it. I really appreciate your help. 

HTML:

<a href="" class="button">everyone</a><br>

CSS:

.button {
  background: #fff;
  color: #000;
  padding: 2px 12px 6px 50px;
  position: relative;
  text-decoration: none;
}

.button::before {
  border: 1px solid #000;
  content: "";
  left: 1px;
  position: absolute;
  top: 12px;
  height: 8px;
  width: 8px;
}

.button:hover, 
.button:active {
  font-weight: bold;
}

.button:hover::before,
.button:active::before {
  background: #000;
  top: 8px;
  left: -4px;
  height: 19px;
  width: 19px;
}

Best,

Amir