Jump to content

Need Help for Rollover Buttons CSS + UIkit Toggle


Recommended Posts


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. 


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


.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:active {
  font-weight: bold;

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



Link to comment
Share on other sites

This topic is now closed to further replies.

  • Create New...