Why doesn't my back button show?

So I found http://codepen.io/isyara/pen/plDhf this, and I thought that it would be perfect for my site,
but when adding the html and css code, nothing shows.
The mouse cursors changes from arrow to the hand so it finds something, but the button doesnt display, the site is all white.
So I created new index.html and a new css to see if it works and maybe it just collided with other css classes. Nope.
Still the same problem, nothing displays.

It is impossible for us to know why the back button is not visible on your site without being able to see the code. Could you post a link to your site?

I know that, thats why I made new html “project” just to see if it worked. And it didn’t, But it works on http://codepen.io/isyara/pen/plDhf

HTML

<div class="back"><div<>

CSS

@import "compass/css3";

.back{
  width: 50px;
  height: 30px;
  position:relative;
  cursor: pointer;
 
  &:before,
  &:after {
   content: "";
   width: 1px;
   height:29px;
   background-color: #000;
   position: absolute;
   transform-origin: 50% 50%;
   left: 50%;
   top:0;           
   transition: transform 0.2s ease 0s;
  }
  
  &:before {
    transform: rotate(45deg);
  }
  &:after {
    transform: rotate(-45deg);
  }
  
  &:hover:before {
    transform: translateX(-10px) rotate(45deg);
  }
  &:hover:after {
    transform: translateX(10px) rotate(-45deg);
  }
}

Are you sure the @import "compass/css3"; is working?

The code that you are posting is copied from the codepen. It is uncompiled SCSS. Click the “View Compile” button and convert it into real CSS, then correct the close div in your HTML code and it should work.

<div class="back"></div>

Yep

It worked!
Dumb for not noticing the “compile” button.
Thank you!

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.