Tag: #buttons

Read More/ Read Less Button

Post author By Lena Stanley
Post date July 2, 2021

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!

CSS Button Fill Effect on Hover

Post author By Lena Stanley
Post date May 20, 2021

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:

Add HTML
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!

CSS Shiny Button

Post author By Lena Stanley
Post date February 3, 2020

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:

Add HTML
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: