Creating forward, backward buttons

My attempt here: https://jsfiddle.net/oawxpzj4/1/


Trying to make a copy of this: https://jsfiddle.net/oawxpzj4/

How should this css have been written instead?

.exit {
  display: inline-block;
  width: 64px;
  height: 64px;
  border: 8px solid #333;
  border-radius: 50%;
  margin-right: 24px;
}

.exit::after {
  content: '';
  display: inline-block;
  margin-top: 16.8px;
  margin-left: 9.6px;
  width: 22.4px;
  height: 22.4px;
  border-top: 8px solid #333;
  border-right: 8px solid #333;
  -moz-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}


.exit.exitPage2 {
  display: inline-block;
  width: 64px;
  height: 64px;
  border: 8px solid #333;
  border-radius: 50%;
  margin-left: 24px;
}

.exit.exitPage2::after {
  content: '';
  display: inline-block;
  margin-top: 16.8px;
  margin-left: -9.6px;
  width: 22.4px;
  height: 22.4px;
  border-top: 8px solid #333;
  border-right: 8px solid #333;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.exit.exitPage3 {
  display: inline-block;
  width: 64px;
  height: 64px;
  border: 8px solid #333;
  border-radius: 50%;
  margin-right: 24px;
}

.exit.exitPage3::after {
  content: '';
  display: inline-block;
  margin-top: 16.8px;
  margin-left: 9.6px;
  width: 22.4px;
  height: 22.4px;
  border-top: 8px solid #333;
  border-right: 8px solid #333;
  -moz-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

a:hover .exit,
a:hover .exit.exitPage2,
a:hover .exit.exitPage3 {
  border: 8px solid #e74c3c;
}

a:hover .exit::after,
a:hover .exit.exitPage2::after,
a:hover .exit.exitPage3 {
  border-top: 8px solid #e74c3c;
  border-right: 8px solid #e74c3c;
}

  <button class="exit exitPage3" type="button"></button>
  <button class="exit exitPage2" type="button"></button>

  <button class="exit" type="button"></button>
  <button class="exit exitPage3" type="button"></button>

  <button class="exit exitPage2" type="button"></button>
  <button class="exit" type="button"></button>

Don’t repeat unnecessary rules all the time. It just makes the code so much harder to work with.:slight_smile:

You only need this:

.exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 8px solid #333;
  border-radius: 50%;
  margin-right: 24px;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.exit::after {
  content: '';
  width: 22px;
  height: 22px;
  border-top: 8px solid #333;
  border-right: 8px solid #333;
  transform: rotate(-135deg);
  margin-left: 9px;
}

.exit.exitPage2 {
  margin-left: 24px;
}

.exit.exitPage2::after {
  margin-left: -9px;
  transform: rotate(45deg);
}

Note that the following rules cannot be used ever in your page.

a:hover .exit,
a:hover .exit.exitPage2,
a:hover .exit.exitPage3 {
  border: 8px solid #e74c3c;
}

a:hover .exit::after,
a:hover .exit.exitPage2::after,
a:hover .exit.exitPage3 {
  border-top: 8px solid #e74c3c;
  border-right: 8px solid #e74c3c;
}

A button element (.exit) cannot be wrapped in an anchor (nor vice versa). They are both interactive elements which can’t be nested inside each other.

How do I do the hover stuff then?

Don’t I need exitPage3?

Is there any difference in the code for exitPage3 that isn;t already supplied by .exit?

You know this :slight_smile:

.exit:hover {
  border: 8px solid #e74c3c;
}

.exit:hover::after {
  border-top: 8px solid #e74c3c;
  border-right: 8px solid #e74c3c;
}
1 Like

This would then be changed to what then?
I don’t understand how I would remove exitPage3

Can you show me how this would be done, because I still don’t understand. https://jsfiddle.net/x7gv5Ltn/

I still don’t think it can be removed, I can’t figure it out.

Currently:

If you are in .container1 exitPage3 takes you to page3 exitPage2 takes you to page2

      <button class="exit exitPage3" type="button"></button>
      <button class="exit exitPage2" type="button"></button>

If you are in .container2 exit takes you to page1 exitPage3 takes you to page3

        <button class="exit" type="button"></button>
        <button class="exit exitPage3" type="button"></button>

If you are in .container3 exitPage2 takes you to page2 exit takes you to page1

        <button class="exit exitPage2" type="button"></button>
        <button class="exit" type="button"></button>

And then in here, exitPage3 would get changed to exitPage2?

I still don’t understand.

  function exitClickHandler(e) {
    if (e.target.classList.contains("exit")) {
      document.querySelector(".container2").classList.add("hide");
      document.querySelector(".container3").classList.add("hide");
      document.querySelector(".container1").classList.remove("hide");
      console.log('Page1');
    }
    if (e.target.classList.contains("exitPage2")) {
      document.querySelector(".container1").classList.add("hide");
      document.querySelector(".container3").classList.add("hide");
      document.querySelector(".container2").classList.remove("hide");
      console.log('Page2');
    }
    if (e.target.classList.contains("exitPage3")) {
      document.querySelector(".container2").classList.add("hide");
      document.querySelector(".container1").classList.add("hide");
      document.querySelector(".container3").classList.remove("hide");
      console.log('Page3');
    }
    window.scrollTo(0, 0);
  }

You can’t remove it as the js is using it. You don’t need to have it in the css file as the styles are supplied by .exit.

2 Likes

There are two divs in this container I am trying to convert into buttons.

It’s not as easy as just removing the a tags, because, if you don’t know what you are doing like myself, you end up messing everything up.

I have to remove the a tags from them: https://jsfiddle.net/hnLdrw6e/1/

Each time I try it is not looking like the original.

Why is this so hard to do?

<div class="button-container">
  <div class="btn"><a href="#">Page 3</a></div>
  <div class="btn"><a href="#">Page 2</a></div>
</div>

.button-container {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.button-container .btn {
  position: relative;
  width: 155px;
  height: 50px;
  margin: 20px;
}

.button-container .btn a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  color: #fff;
  z-index: 1;
  font-weight: 400;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(15px);
}

.button-container .btn:hover a {
  letter-spacing: 3px;
}

.button-container .btn a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(45deg) translateX(0);
  transition: 0.5s;
}

.button-container .btn:hover a::before {
  transform: skewX(45deg) translateX(200%);
}

.button-container .btn::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.button-container .btn:hover::before {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.button-container .btn::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.button-container .btn:hover::after {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.button-container .btn::before,
.button-container .btn::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}

I think I did it, not sure if it can be improved or not. https://jsfiddle.net/k4j1fsrv/2/

At this link here: https://jsfiddle.net/k4j1fsrv/3/

I did this:

<div class="button-container">
  <button class="btn" type="button"><span>Page 3</span></button>
  <button class="btn" type="button"><span>Page 2</span></button>
</div>

It should be:

<button class="exit exitPage3" type="button"></button>
<button class="exit exitPage2" type="button"></button>

There should be 3, actually.

  <button class="exit" type="button"><span>Page 1</span></button>
  <button class="exit exitPage3" type="button"><span>Page 3</span></button>
  <button class="exit exitPage2" type="button"><span>Page 2</span></button>

And now they changed and look like this:

<div class="button-container">
  <div class="btn"><span>Page 3</span></div>
  <div class="btn"><span>Page 2</span></div>
</div>

At this link here I now have 3: https://jsfiddle.net/28rhwg9f/2/

All the styles have disappeared from them, how to I get them back?

<div class="button-container">
  <button class="exit" type="button"><span>Page 1</span></button>
  <button class="exit exitPage3" type="button"><span>Page 3</span></button>
  <button class="exit exitPage2" type="button"><span>Page 2</span></button>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

body{
  background: black;
}

.button-container {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.button-container .exit {
  position: relative;
  width: 155px;
  height: 50px;
  margin: 20px;
}

.button-container .exit span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  color: #fff;
  z-index: 1;
  font-weight: 400;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(15px);
}

.button-container .exit:hover span {
  letter-spacing: 3px;
}

.button-container .exit span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(45deg) translateX(0);
  transition: 0.5s;
}

.button-container .exit:hover span::before {
  transform: skewX(45deg) translateX(200%);
}

.button-container .exit::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.button-container .exit:hover::before {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.button-container .exit::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.button-container .exit:hover::after {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.button-container .exit::before,
.button-container .exit::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}

Button https://jsfiddle.net/v9pqwzr3/

How do I get the button to look the the div again?

How do I add the styles /appearance of the div back to the button?

div https://jsfiddle.net/Lk6uzb50/

You’ve styled buttons plenty of times. Look back at your buttons and see that you have to remove the default styling of the button. A div has no styling so there’s nothing to remove but all form elements come pre-styled.

  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;

You can probably add font-size and color to that list as well.

.button-container .btn {
  position: relative;
  width: 155px;
  height: 50px;
  margin: 20px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
}

Here is what you see for a button with no css. Look at the useragent defaults.

1 Like

I have the buttons on the page now, but they aren’t taking me to anywhere.

https://jsfiddle.net/rqjn9cd2/3/

What else is needed to be done in the CSS?

I don’t think these would be set up the same way as the other ones.

I thought this part was all that needed to be done:

And those 2 buttons would work after that.

.button-container .exit.exitPage2::before,
.button-container .exit.exitPage2::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}
    <div class="button-container">
      <button class="exit exitPage3" type="button"><span>Page 3</span></button>
      <button class="exit updated" type="button"><span>Updated</span></button>
      <button class="exit exitPage2" type="button"><span>Page 2</span></button>
    </div>

CSS

.button-container {
  position:absolute;
  left:0;
  right:0;
  display: flex;
  flex-wrap: wrap;
  margin: 30px auto 0;
  justify-content: center;
  align-content: center;
  max-width: 385px;
  gap: 40px;
  font-family: 'Roboto', sans-serif;
}

.button-container .exit {
  position: relative;
  width: 100px;
  height: 50px;
 /* margin: 20px;*/
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor: pointer;
}

.button-container .exit span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  color: #fff;
  z-index: 1;
  font-weight: 400;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(15px);
}

.button-container .exit:hover span {
  letter-spacing: 3px;
}

.button-container .exit span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(45deg) translateX(0);
  transition: 0.5s;
}

.button-container .exit.exitPage2:hover span::before {
  transform: skewX(45deg) translateX(200%);
}

.button-container .exit::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.button-container .exit:hover::before {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.button-container .exit::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.button-container .exit:hover::after {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

.button-container .exit::before,
.button-container .exit::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}

.button-container .exit.exitPage2::before,
.button-container .exit.exitPage2::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}