Categories
Web development

Read More/ Read Less Button

Read More/ Read Less Button

To learn how to create the CSS & JavaScript Read More/ Less button follow the steps below:

Demo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra scelerisque orci, eu laoreet tortor euismod quis. Sed id volutpat magna. Suspendisse porta nisi eget massa accumsan, nec tempus est consectetur. Nam quis quam volutpat, luctus massa interdum, dictum metus. Etiam ut scelerisque ante. Quisque quam sem nulla. Quisque quam sem, porttitor eu finibus in, consequat quis sapien. Maecenas id fermentum lorem. Nulla vitae mattis justo, non dictum velit. Phasellus sit amet lorem viverra, sagittis neque id, volutpat leo. Curabitur purus elit, tincidunt nec commodo a, sollicitudin eu ipsum. Suspendisse pulvinar tincidunt nisl.


Step1.

Add HTML

Add some text and the button:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra scelerisque orci, eu laoreet tortor euismod quis. Sed id volutpat magna. Suspendisse porta nisi eget massa accumsan, nec tempus est consectetur. Nam quis quam volutpat, luctus massa interdum, dictum metus. Etiam ut scelerisque ante. Quisque quam sem <span id="sep">...</span><span id="moreText">nulla. Quisque quam sem, porttitor eu finibus in, consequat quis sapien. Maecenas id fermentum lorem. Nulla vitae mattis justo, non dictum velit. Phasellus sit amet lorem viverra, sagittis neque id, volutpat leo. Curabitur purus elit, tincidunt nec commodo a, sollicitudin eu ipsum. Suspendisse pulvinar tincidunt nisl. </span></p>

<button onclick="readMoreLess()" id="button">Read more</button>

Step2.

Add CSS

#moreText {display: none;}

Step3.

Add JavaScript

function readMoreLess() {
  var sep = document.getElementById("sep");
  var moreText = document.getElementById("moreText");
  var buttonText = document.getElementById("button");

  if (sep.style.display === "none") {
    sep.style.display = "inline";
    buttonText.innerHTML = "Read More"; 
    moreText.style.display = "none";
  } else {
    sep.style.display = "none";
    buttonText.innerHTML = "Read Less"; 
    moreText.style.display = "inline";
  }
}

Enjoy coding!

Read also:

Scroll To Top Button (smooth scroll effect)

How to create round social media icons/ buttons?

CSS Shiny Button

Categories
CSS Web development

CSS Button Fill Effect on Hover

CSS Button Fill Effect on Hover

Demo:

*to see the CSS Button Fill Effect on the website click here.

To create the CSS Button Fill Effect on Hover follow the steps below:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<button class="left">BUTTON</button>
<button class="up">BUTTON</button>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Style the buttons:

button {
  padding: 20px 20px;
  margin:20px;
  font-size: 25px;
  font-weight: bold;
  font-family: Tahoma, sans-serif;
  box-shadow:7px 7px rgba(0,0,0,0.5);
  transition: .3s ease;
  overflow: hidden;
  cursor: pointer;
}
.left {
  position: relative;
  border: 10px solid #2ec4b6;
  z-index:1;
}
.left:before {
  content:"";
  position: absolute;
  z-index:-1;
  top:0;
  left:0;
  height:100%;
  width:0;
  background-color: #2ec4b6;
  transition: .3s width ease;
}
.up {
  position: relative;
  border: 10px solid #f94144;
  z-index:1;
}
.up:before {
  content:"";
  position: absolute;
  z-index:-1;
  background-color: #f94144;
  width:100%;
  height:0;
  top:0;
  left:0;
  transition: height .3s ease;
}

Add transitions on hover:

button:hover {
  transform: translateY(7px) translateX(7px);
  box-shadow: 0 0 rgba(0,0,0,0.5); 
}
.left:hover {
  color: white;
}
.left:hover:before {
  width:100%;
}
.up:hover {
  color: white;
}
.up:hover:before {
  height: 100%;
}

Enjoy coding!

Read also:

CSS Neon Button/ Neon Effect

Scroll To Top Button (smooth scroll effect)

CSS Shiny Button

Categories
CSS Web development

CSS Shiny Button

CSS Shiny Button

We’ll create a button and the shine effect using only pure CSS:

*animation opened in the Safari browser.
To see the animation on the website click here.

Demo:

To create the CSS Shiny Button follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Let’s start with HTML:

Step 1.

Add HTML

<button class="button">Button</button>

Step 2.

Add CSS and CSS Animation

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
  background-color: #2b2d42;
}

.button {
  background: #8d99ae;
  color: white;
  font: 18px Georgia, sans-serif;
  line-height: 42px;
  padding: 1em 3em;
  position: relative;
  overflow: hidden;
   
}

.button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(230, 175, 145, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0)); 
  transform: rotateZ(60deg) translate(-5em, 7.5em);  
}

.button:hover::after, button:focus::after {
  animation: sheen 1.5s forwards;
}

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

To see the live output visit: lenastanley.com

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Button Fill Effect on Hover

Read More/ Read Less Button

Scroll To Top Button (smooth scroll effect)