CODEWITHSUNDEEP
css
Antimoany
Antimoany

Reputation: 75

Is it possible to create a button using nothing but CSS that changes the appearance of a page?

I'm using a website that allows members to alter the appearance of their own page with CSS. No HTML permitted, only CSS. I've deliberately made my page as bright and clashing and "graphic design is my passion" as possible. This is not a serious site and I'm not taking it seriously.

However, I would like to implement a button that removes the most visually offensive elements of the design and makes it possible to actually read my page, should anyone want to.

I'm fairly confident this isn't possible with only CSS, but I thought I'd ask just to be certain.

Upvotes: 0

Views: 57

Answers (1)

nimsrules
nimsrules

Reputation: 2064

This is an extension of my comment to the OP's question:

.content{
  width: 500px;
  background: #e1e1e1;
  margin-top: 30px;
}
.remove-el{
  width: 30px;
  height: 30px;
  background: red;
}
input[type="checkbox"]{
  -webkit-appearance: none;
}
input[type="checkbox"] ~ label{
  background: teal;
  color: #fff;
  padding: 5px;
}
input[type="checkbox"]:checked ~ label{
  background: #e1e1e1;
  color: #aaa;
}
input[type="checkbox"]:checked ~ .content .remove-el{
  display: none;
}
<input type="checkbox" id="more-readable">
<label for="more-readable">Make it more readable</label>

<div class="content">
  <div class="remove-el"></div>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt nostrum quasi labore, neque incidunt enim soluta velit in possimus, amet cupiditate optio sequi ipsum natus aperiam quibusdam eos molestiae. Excepturi.</p>
  <p>Rerum consequuntur provident, vel tempora dolore deleniti impedit quia ab exercitationem laboriosam quaerat perspiciatis doloremque accusamus, nesciunt sed veniam libero soluta quasi recusandae unde nostrum sapiente nam. Culpa, fugiat omnis!</p>
    <div class="remove-el"></div>
  <p>Quibusdam, voluptatibus ipsa reprehenderit reiciendis suscipit maxime vero praesentium nobis ex perspiciatis quo laudantium? Alias aliquam voluptatum, exercitationem ea modi corrupti aspernatur a. Illo sint distinctio quos quod quas quasi!</p>
  <p>Autem praesentium inventore soluta atque ut, consectetur minima itaque perspiciatis sint nobis assumenda eum vitae culpa nemo fugiat facere in sapiente eaque a voluptatibus aut recusandae commodi ipsam? Iste, quae.</p>
    <div class="remove-el"></div>
  <p>Unde sequi nihil, molestias laudantium ex dolorem corporis dolore at minima perferendis consequuntur, nisi repellendus quibusdam sit reiciendis fugit officiis optio dicta veniam asperiores ab enim. Dolorem commodi illum saepe!</p>
  <p>Eos labore quo, deserunt nobis hic molestias excepturi accusantium quidem aperiam quisquam sapiente delectus. Nulla enim delectus illum, sunt cupiditate et incidunt ducimus alias eligendi labore iste! Iste, sapiente ad.</p>
    <div class="remove-el"></div>
  <p>Sint, nisi sunt. Neque, libero est rerum adipisci cum commodi aliquid architecto eveniet natus culpa eligendi earum ratione? Excepturi sed hic impedit esse inventore fugit? Ut minus quia odio quis!</p>
  <p>Corrupti nesciunt dolor amet sunt autem dicta minima expedita ducimus illum! Mollitia molestiae nihil veniam cupiditate! Veritatis explicabo voluptatem soluta, nemo libero illum. A magni molestiae provident possimus laudantium dolorum.</p>
    <div class="remove-el"></div>
    <div class="remove-el"></div>
  <p>Itaque numquam, provident molestias odit eum deleniti ab temporibus iure earum non pariatur a aliquid minus? Eius adipisci quis delectus praesentium ab minus quaerat debitis inventore quo! Hic, facilis vel.</p>
    <div class="remove-el"></div>
  <p>Atque esse pariatur porro non quo minus nesciunt cumque perspiciatis vel ad deserunt culpa eius facere aut adipisci, fuga, mollitia nam enim dolore veritatis vitae, dolorem obcaecati? Eos, quidem in.</p>
</div>

Upvotes: 2

Related Questions