Amazing CSS

Awesome textured text with html and css

amazingcss.super@gmail.com — Thu, 09 Jan 2020 06:00:00 GMT

Do you know how to create an awesome textured text with html and css? It is very simple. And here is how you can do it from Darkcode. Just click on the button Run Pen below, to see how it works:

How to create an awesome textured text

Step 1: Add Html

<div class="text">darkcode</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
  background: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1578584481/bg_mcnuhk.jpg)
    center no-repeat;
  background-size: cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  font-size: 8em;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  mask-image: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1578584486/mask_hphgdl.png);
  -webkit-mask-image: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1578584486/mask_hphgdl.png);
}

Animated share button with html and css

amazingcss.super@gmail.com — Wed, 08 Jan 2020 06:00:00 GMT

Here is an amazing animated share button which is created with html and css only from Darkcode. Just click on the button Run Pen below, to see how it works:

Note: This project also use Font Awesome for creating icons.

Step 1: Add Html

<div class="share-button">
  <span><i class="fas fa-share-alt"></i> Share!</span>
  <a href="#"><i class="fab fa-facebook-f"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>
  <a href="#"><i class="fab fa-instagram"></i></a>
  <a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
  background: #f1f1f1;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.share-button {
  width: 280px;
  height: 80px;
  background: #dfe6e9;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: 0.3s linear;
}

.share-button:hover {
  transform: scale(1.1);
}

.share-button span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #2d3436;
  color: #f1f1f1;
  text-align: center;
  line-height: 80px;
  z-index: 999;
  transition: 0.6s linear;
  border-radius: 40px;
}

.share-button:hover span {
  transform: translateX(-100%);
  transition-delay: 0.3s;
}

.share-button a {
  flex: 1;
  font-size: 26px;
  color: #2d3436;
  text-align: center;
  transform: translateX(-100%);
  opacity: 0;
  transition: 0.3s linear;
}

.share-button:hover a {
  opacity: 1;
  transform: translateX(0);
}

.share-button a:nth-of-type(1) {
  transition-delay: 1s;
}

.share-button a:nth-of-type(2) {
  transition-delay: 0.8s;
}

.share-button a:nth-of-type(3) {
  transition-delay: 0.6s;
}

.share-button a:nth-of-type(4) {
  transition-delay: 0.4s;
}

Button with amazing hover effect

amazingcss.super@gmail.com — Tue, 07 Jan 2020 06:00:00 GMT

This is a button with amazing hover effect which you can easily apply to your project from Darkcode. Just click on the button Run Pen below, to see how it works:

How to create a button with amazing hover effect

Step 1: Add Html

<button class="btn">Hover Me</button>

Step 2: Add CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
}

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

.btn {
  width: 200px;
  height: 60px;
  background: none;
  border: 4px solid;
  color: #3498db;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  font-size: 16px;
  position: relative;
}

.btn::before,
.btn::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 4px;
  background: #353b48;
  transform: skewX(50deg);
  transition: 0.4s linear;
}

.btn::before {
  top: -4px;
  left: 10%;
}

.btn::after {
  bottom: -4px;
  right: 10%;
}

.btn:hover::before {
  left: 80%;
}

.btn:hover::after {
  right: 80%;
}

Amazing css with profile card

amazingcss.super@gmail.com — Mon, 06 Jan 2020 06:00:00 GMT

This post will show you how to create an amazing css with profile card from Darkcode. To see how it works, just click on the button Run Pen below:

Note:

This project also use Font Awesome for creating icons.
This project does not set up a responsive layout. So to see the whole user interface, you can open the pen in a new tab.

Step 1: Add Html

<div class="profile-card">
  <div class="top-section">
    <i class="message fas fa-envelope"></i>
    <i class="notif fas fa-bell"></i>
    <div class="pic">
      <img
        src="https://res.cloudinary.com/drcrre4xg/image/upload/v1578327066/pic_jyrevs.png"
        alt=""
      />
    </div>
    <div class="name">darkcode</div>
    <div class="tag">@darkcodeonline</div>
  </div>

  <div class="bottom-section">
    <div class="social-media">
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fas fa-link"></i></a>
    </div>

    <div class="videos">190 <span>Videos</span></div>
    <div class="border"></div>
    <div class="subscribers">204K <span>Subscribers</span></div>
    <div class="border"></div>
    <div class="views">7.3M <span>Views</span></div>
  </div>
</div>

Step 2: Add CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
  text-decoration: none;
}

body {
  background: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1578327067/bg_ajy0uu.jpg)
    no-repeat center;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-card {
  width: 420px;
  overflow: hidden;
  text-align: center;
  position: relative;
  box-shadow: 0 0 10px #00000070;
}

.top-section {
  padding: 60px 40px;
  background: #2c2c54aa;
}

.message,
.notif {
  position: absolute;
  top: 40px;
  font-size: 20px;
  cursor: pointer;
  color: #ffffff50;
}

.message {
  right: 40px;
}

.notif {
  left: 40px;
}

.pic {
  width: 150px;
  height: 150px;
  margin: auto;
  margin-bottom: 20px;
  border: 2px solid #2c3e50;
  border-radius: 50%;
  padding: 8px;
  position: relative;
}

.pic:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px solid #2c3e50;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-radius: 50%;
  animation: wave 1.5s infinite linear;
}

@keyframes wave {
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

.pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.name {
  color: #f1f1f1;
  font-size: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.tag {
  font-size: 18px;
  color: #222;
}

.bottom-section {
  background: #f1f1f1;
  padding: 60px 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-transform: uppercase;
}

.border {
  width: 1px;
  height: 20px;
  background: #bbb;
  margin: 0 30px;
}

.bottom-section span {
  font-size: 14px;
  display: block;
}

.social-media {
  position: absolute;
  width: 100%;
  top: -30px;
  left: 0;
  z-index: 1;
}

.social-media i {
  width: 60px;
  height: 60px;
  background: #2c3e50;
  border-radius: 50%;
  color: #f1f1f1;
  font-size: 20px;
  line-height: 60px !important;
  margin: 0 10px;
  position: relative;
}

.social-media i:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #2c3e50;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: -1;
  transition: 0.4s linear;
}

.social-media i:hover:after {
  transform: scale(1.4);
  opacity: 0;
}

Cool hover effect on menu

amazingcss.super@gmail.com — Sun, 05 Jan 2020 10:30:00 GMT

Menu is the most important element on a website. This post will show you how to create a cool hover effect on menu from Darkcode. Just click on the button Run Pen below to see how it works:

Step 1: Add Html

<ul id="menu">
  <ul>
    <center>
      <li><a href="#">Home</a></li>
      <li><a href="#">Works</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Concact</a></li>
      <li><a href="#">Buy</a></li>
    </center>
  </ul>
</ul>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #f1f1f1;
}
#menu {
  margin: 0;
  padding: 0;
  margin-top: 150px;
}
#menu li {
  list-style: none;
  display: inline-block;
}
#menu li a {
  text-decoration: none;
  position: relative;
  color: #313131;
  font-size: 50px;
  font-weight: 700;
  font-family: sans-serif;
  display: block;
  overflow: hidden;
  transition: 0.7s all;
  padding: 14px 0px;
  margin: 0px 30px;
  text-transform: uppercase;
}
#menu li a:before {
  content: '';
  width: 60px;
  position: absolute;
  border-bottom: 8px solid #313131;
  bottom: 0;
  right: 350px;
  transition: 0.7s all;
}
#menu li a:hover:before {
  right: 0;
}

Slideshow with navigation buttons by CSS

amazingcss.super@gmail.com — Sun, 27 Oct 2019 11:25:00 GMT

Do you think that we can create a slideshow with navigation buttons with CSS only, not any JavaScript? Here is how we can do it from Darkcode. Just click on the button Run Pen below to see how it works:

Step 1: Add Html

<div class="slidershow middle">
  <div class="slides">
    <input type="radio" name="r" id="r1" checked />
    <input type="radio" name="r" id="r2" />
    <input type="radio" name="r" id="r3" />
    <input type="radio" name="r" id="r4" />
    <input type="radio" name="r" id="r5" />
    <div class="slide s1">
      <img
        src="https://res.cloudinary.com/drcrre4xg/image/upload/v1572143490/img_znoaoj.jpg"
        alt=""
      />
    </div>
    <div class="slide">
      <img
        src="https://res.cloudinary.com/drcrre4xg/image/upload/v1572143370/p_gql1de.png"
        alt=""
      />
    </div>
    <div class="slide">
      <img
        src="https://res.cloudinary.com/drcrre4xg/image/upload/v1572143059/bg_vuimc0.jpg"
        alt=""
      />
    </div>
    <div class="slide">
      <img
        src="https://res.cloudinary.com/drcrre4xg/image/upload/v1572142950/bg_k00qm0.png"
        alt=""
      />
    </div>
    <div class="slide">
      <img
        src="https://res.cloudinary.com/drcrre4xg/image/upload/v1571848483/img_gfo5ks.jpg"
        alt=""
      />
    </div>
  </div>

  <div class="navigation">
    <label for="r1" class="bar"></label>
    <label for="r2" class="bar"></label>
    <label for="r3" class="bar"></label>
    <label for="r4" class="bar"></label>
    <label for="r5" class="bar"></label>
  </div>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #34495e;
}
.slidershow {
  width: 700px;
  height: 400px;
  overflow: hidden;
}
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.bar {
  width: 50px;
  height: 10px;
  border: 2px solid #fff;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}
.bar:hover {
  background: #fff;
}

input[name='r'] {
  position: absolute;
  visibility: hidden;
}

.slides {
  width: 500%;
  height: 100%;
  display: flex;
}

.slide {
  width: 20%;
  transition: 0.6s;
}
.slide img {
  width: 100%;
  height: 100%;
}

#r1:checked ~ .s1 {
  margin-left: 0;
}
#r2:checked ~ .s1 {
  margin-left: -20%;
}
#r3:checked ~ .s1 {
  margin-left: -40%;
}
#r4:checked ~ .s1 {
  margin-left: -60%;
}
#r5:checked ~ .s1 {
  margin-left: -80%;
}

Amazing CSS with ripple animation

amazingcss.super@gmail.com — Sun, 27 Oct 2019 11:20:00 GMT

Do you know how to create an amazing css with ripple animation? This post will show you how to do it by Darkcode. To see how it works, just click on the button Run Pen below:

Step 1: Add Html

<div class="container">
  <span class="ripple r1"></span>
  <span class="ripple r2"></span>
  <span class="ripple r3"></span>
  <span class="ripple r4"></span>
  <span class="ripple r5"></span>
  <span class="ripple r6"></span>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #3498db;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(70deg);
}
.ripple {
  position: fixed;
  top: 0;
  transform: translateX(-50%);

  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: ripple 4s linear infinite;
}
.r2 {
  animation-delay: 0.8s;
}
.r3 {
  animation-delay: 1.6s;
}
.r4 {
  animation-delay: 2.4s;
}
.r5 {
  animation-delay: 3.2s;
}
.r6 {
  animation-delay: 4s;
}

@keyframes ripple {
  from {
    border: 4px solid #8e44ad;
    background: #9b59b670;
  }
  to {
    border: 0px solid #8e44ad;
    background: #9b59b670;
    width: 400px;
    height: 400px;
    top: 20px;
    opacity: 0;
  }
}

Responsive navigation bar with css

amazingcss.super@gmail.com — Sun, 27 Oct 2019 11:15:00 GMT

Responsive navigation bar is in everywhere. This post will show you how to create a responsive navigation bar with css from Darkcode. Just click on the button Run Pen below to see how it works:

Note: This project also use Font Awesome for creating icons.

Step 1: Add Html

<div class="header">
  <h2 class="logo">DarkCode</h2>
  <input type="checkbox" id="chk" />
  <label for="chk" class="show-menu-btn">
    <i class="fas fa-ellipsis-h"></i>
  </label>

  <ul class="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Works</a>
    <a href="#">Contact</a>
    <label for="chk" class="hide-menu-btn">
      <i class="fas fa-times"></i>
    </label>
  </ul>
</div>

<div class="content">
  <center>
    <img
      src="https://res.cloudinary.com/drcrre4xg/image/upload/v1572143490/img_znoaoj.jpg"
      alt=""
    />
  </center>

  <p>
    The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor
    sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
    in culpa qui officia deserunt mollit anim id est laborum." Section 1.10.32
    of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
    perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
    veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque
    porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
    adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
    dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
    nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
    ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
    voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
    eum fugiat quo voluptas nulla pariatur?" 1914 translation by H. Rackham "But
    I must explain to you how all this mistaken idea of denouncing pleasure and
    praising pain was born and I will give you a complete account of the system,
    and expound the actual teachings of the great explorer of the truth, the
    master-builder of human happiness. No one rejects, dislikes, or avoids
    pleasure itself, because it is pleasure, but because those who do not know
    how to pursue pleasure rationally encounter consequences that are extremely
    painful. Nor again is there anyone who loves or pursues or desires to obtain
    pain of itself, because it is pain, but because occasionally circumstances
    occur in which toil and pain can procure him some great pleasure. To take a
    trivial example, which of us ever undertakes laborious physical exercise,
    except to obtain some advantage from it? But who has any right to find fault
    with a man who chooses to enjoy a pleasure that has no annoying
    consequences, or one who avoids a pain that produces no resultant pleasure?"
    Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45
    BC "At vero eos et accusamus et iusto odio dignissimos ducimus qui
    blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et
    quas molestias excepturi sint occaecati cupiditate non provident, similique
    sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
    fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero
    tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus
    id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis
    dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut
    rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
    molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
    delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
    perferendis doloribus asperiores repellat." 1914 translation by H. Rackham
    "On the other hand, we denounce with righteous indignation and dislike men
    who are so beguiled and demoralized by the charms of pleasure of the moment,
    so blinded by desire, that they cannot foresee the pain and trouble that are
    bound to ensue; and equal blame belongs to those who fail in their duty
    through weakness of will, which is the same as saying through shrinking from
    toil and pain. These cases are perfectly simple and easy to distinguish. In
    a free hour, when our power of choice is untrammelled and when nothing
    prevents our being able to do what we like best, every pleasure is to be
    welcomed and every pain avoided. But in certain circumstances and owing to
    the claims of duty or the obligations of business it will frequently occur
    that pleasures have to be repudiated and annoyances accepted. The wise man
    therefore always holds in these matters to this principle of selection: he
    rejects pleasures to secure other greater pleasures, or else he endures
    pains to avoid worse pains."
  </p>
</div>

Step 2: Add CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
}
.header {
  height: 100px;
  background: #34495e;
  padding: 0 20px;
  color: #fff;
}
.logo {
  line-height: 100px;
  float: left;
  text-transform: uppercase;
}

.menu {
  float: right;
  line-height: 100px;
}
.menu a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 10px;
  transition: 0.4s;
}
.show-menu-btn,
.hide-menu-btn {
  transition: 0.4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
.show-menu-btn {
  float: right;
}
.show-menu-btn i {
  line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
  color: #3498db;
}

#chk {
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

.content {
  padding: 0 20px;
}
.content img {
  width: 100%;
  max-width: 700px;
  margin: 20px 0;
}
.content p {
  text-align: justify;
}

@media screen and (max-width: 800px) {
  .show-menu-btn,
  .hide-menu-btn {
    display: block;
  }
  .menu {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #333;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
  }
  .menu a {
    display: block;
    padding: 20px;
  }
  .hide-menu-btn {
    position: absolute;
    top: 40px;
    right: 40px;
  }
  #chk:checked ~ .menu {
    right: 0;
  }
}

Amazing profile card using html and css

amazingcss.super@gmail.com — Sun, 27 Oct 2019 11:05:00 GMT

This is an amazing profile card using html and css, which is created by Darkcode. You can use easily apply it to your portfolio project now. To see how it works, just click on the button Run Pen below:

Step 1: Add Html

<div class="card middle">
  <div class="top-section">
    <img
      src="https://res.cloudinary.com/drcrre4xg/image/upload/v1572143370/p_gql1de.png"
      alt=""
    />
    <div class="menuicon">
      <span class="s1"></span>
      <span class="s2"></span>
    </div>
    <div class="name">
      Dean <br />
      <span>Nunez</span>
    </div>
  </div>

  <div class="info-section">
    <h2>
      About
      <div class="border"></div>
    </h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s.
    </p>
    <h2>
      contact
      <div class="border"></div>
    </h2>
    <div class="s-m">
      <a href="" class="fab fa-facebook-f"></a>
      <a href="" class="fab fa-twitter"></a>
      <a href="" class="fab fa-instagram"></a>
      <a href="" class="fab fa-youtube"></a>
      <a href="" class="fab fa-whatsapp"></a>
    </div>
  </div>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #ffeaa7;
}
.card {
  width: 340px;
  background: #f1f1f1;
  overflow: hidden;
  font-family: 'montserrat', sans-serif;
  box-shadow: 0 0 20px #00000070;
}
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.top-section {
  position: relative;
}
.top-section img {
  width: 100%;
}
.menuicon {
  position: absolute;
  width: 22px;
  left: 20px;
  top: 20px;
  cursor: pointer;
}
.menuicon span {
  width: 100%;
  height: 3px;
  background: #000;
  position: relative;
  display: block;
  margin-bottom: 6px;
  opacity: 0.5;
  transition: 0.4s;
}
.menuicon .s1 {
  left: -5px;
}
.menuicon .s2 {
  left: 5px;
}
.menuicon:hover span {
  left: 0;
}
.name {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 40px;
  font-weight: 900;
  opacity: 0.5;
}
.name span {
  text-transform: uppercase;
  font-weight: 600;
}

.info-section {
  padding: 40px;
  padding-top: 0;
  color: #333;
}
h2 {
  position: relative;
  font-size: 16px;
}
.border {
  width: 30px;
  height: 3px;
  background: #778beb;
  position: absolute;
  left: 0;
  bottom: -6px;
}
p {
  text-align: justify;
  font-size: 14px;
}

.s-m {
  text-align: center;
  margin-top: 20px;
}
.s-m a {
  text-decoration: none;
  font-size: 20px;
  color: #333;
  padding: 0 14px;
  transition: 0.4s;
}
.s-m a:hover {
  color: #778beb;
}

Amazing CSS with hover effects on icon

amazingcss.super@gmail.com — Sun, 27 Oct 2019 11:00:00 GMT

They are some hover effects on icon from Darkcode. And they are really amazing css which you can apply to your project to make it more beautiful. To see how it works, just click on the button Run Pen below:

Note: This project also use Font Awesome for creating icons.

How to create an amazing CSS with hover effects on icon

Step 1: Add Html

<section class="s1">
  <a href="#" class="iconbtn fas fa-laptop"></a>
  <a href="#" class="iconbtn fas fa-mobile-alt"></a>
  <a href="#" class="iconbtn fas fa-cog"></a>
  <a href="#" class="iconbtn fas fa-link"></a>
</section>

<section class="s2">
  <a href="#" class="iconbtn fas fa-laptop"></a>
  <a href="#" class="iconbtn fas fa-mobile-alt"></a>
  <a href="#" class="iconbtn fas fa-cog"></a>
  <a href="#" class="iconbtn fas fa-link"></a>
</section>

<section class="s3">
  <a href="#" class="iconbtn fas fa-laptop"></a>
  <a href="#" class="iconbtn fas fa-mobile-alt"></a>
  <a href="#" class="iconbtn fas fa-cog"></a>
  <a href="#" class="iconbtn fas fa-link"></a>
</section>

<section class="s4">
  <a href="#" class="iconbtn fas fa-laptop"></a>
  <a href="#" class="iconbtn fas fa-mobile-alt"></a>
  <a href="#" class="iconbtn fas fa-cog"></a>
  <a href="#" class="iconbtn fas fa-link"></a>
</section>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
}
section {
  height: 25vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.s1 {
  background: #3498db;
}

.s2 {
  background: #e74c3c;
}

.s3 {
  background: #2ecc71;
}

.s4 {
  background: #34495e;
}
.iconbtn {
  width: 80px;
  height: 80px;
  text-decoration: none;
  margin: 20px;
  position: relative;
  font-size: 30px;
  border-radius: 50%;
}
.iconbtn::before {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.iconbtn::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: 0;
}

.s1 .iconbtn,
.s2 .iconbtn {
  color: #fff;
}
.s1 .iconbtn::after {
  border: 4px dashed;
}
.s1 .iconbtn:hover::after {
  animation: ro 7s linear infinite;
}

.s2 .iconbtn {
  border: 4px solid;
}
.s2 .iconbtn:hover {
  animation: ro 2s linear infinite;
}

.s3 .iconbtn {
  border: 4px solid #fff;
  color: #2ecc71;
}
.s3 .iconbtn::after {
  background: #fff;
  transition: 0.2s;
}
.s3 .iconbtn:hover::after {
  transform: scale(0.9);
}

.s4 .iconbtn {
  border: 4px solid #fff;
  color: #34495e;
}
.s4 .iconbtn::after {
  background: #fff;
  transition: 0.4s;
}
.s4 .iconbtn:hover::after {
  transform: scale(1.3);
  opacity: 0;
}
.s4 .iconbtn:hover {
  color: #fff;
}

@keyframes ro {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Customize scrollbar with css only

amazingcss.super@gmail.com — Sun, 27 Oct 2019 10:55:00 GMT

Here is a simple way to customize scrollbar with css only by Darkcode. And you can easily apply it to your project now. To see how it works, just click on the button Run Pen below:

How to customize scrollbar with css only

Step 1: Add Html

<div class="header"></div>

<p>
  The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit
  amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
  et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
  officia deserunt mollit anim id est laborum." Section 1.10.32 of "de Finibus
  Bonorum et Malorum", written by Cicero in 45 BC "Sed ut perspiciatis unde
  omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
  rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
  beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
  sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
  ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
  quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
  modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
  Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
  laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
  reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
  vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" 1914
  translation by H. Rackham "But I must explain to you how all this mistaken
  idea of denouncing pleasure and praising pain was born and I will give you a
  complete account of the system, and expound the actual teachings of the great
  explorer of the truth, the master-builder of human happiness. No one rejects,
  dislikes, or avoids pleasure itself, because it is pleasure, but because those
  who do not know how to pursue pleasure rationally encounter consequences that
  are extremely painful. Nor again is there anyone who loves or pursues or
  desires to obtain pain of itself, because it is pain, but because occasionally
  circumstances occur in which toil and pain can procure him some great
  pleasure. To take a trivial example, which of us ever undertakes laborious
  physical exercise, except to obtain some advantage from it? But who has any
  right to find fault with a man who chooses to enjoy a pleasure that has no
  annoying consequences, or one who avoids a pain that produces no resultant
  pleasure?" Section 1.10.33 of "de Finibus Bonorum et Malorum", written by
  Cicero in 45 BC "At vero eos et accusamus et iusto odio dignissimos ducimus
  qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et
  quas molestias excepturi sint occaecati cupiditate non provident, similique
  sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
  fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero
  tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
  quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
  repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
  necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
  non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut
  reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus
  asperiores repellat." 1914 translation by H. Rackham "On the other hand, we
  denounce with righteous indignation and dislike men who are so beguiled and
  demoralized by the charms of pleasure of the moment, so blinded by desire,
  that they cannot foresee the pain and trouble that are bound to ensue; and
  equal blame belongs to those who fail in their duty through weakness of will,
  which is the same as saying through shrinking from toil and pain. These cases
  are perfectly simple and easy to distinguish. In a free hour, when our power
  of choice is untrammelled and when nothing prevents our being able to do what
  we like best, every pleasure is to be welcomed and every pain avoided. But in
  certain circumstances and owing to the claims of duty or the obligations of
  business it will frequently occur that pleasures have to be repudiated and
  annoyances accepted. The wise man therefore always holds in these matters to
  this principle of selection: he rejects pleasures to secure other greater
  pleasures, or else he endures pains to avoid worse pains." The standard Lorem
  Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
  deserunt mollit anim id est laborum." Section 1.10.32 of "de Finibus Bonorum
  et Malorum", written by Cicero in 45 BC "Sed ut perspiciatis unde omnis iste
  natus error sit voluptatem accusantium doloremque laudantium, totam rem
  aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
  beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
  sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
  ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
  quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
  modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
  Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
  laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
  reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
  vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" 1914
  translation by H. Rackham "But I must explain to you how all this mistaken
  idea of denouncing pleasure and praising pain was born and I will give you a
  complete account of the system, and expound the actual teachings of the great
  explorer of the truth, the master-builder of human happiness. No one rejects,
  dislikes, or avoids pleasure itself, because it is pleasure, but because those
  who do not know how to pursue pleasure rationally encounter consequences that
  are extremely painful. Nor again is there anyone who loves or pursues or
  desires to obtain pain of itself, because it is pain, but because occasionally
  circumstances occur in which toil and pain can procure him some great
  pleasure. To take a trivial example, which of us ever undertakes laborious
  physical exercise, except to obtain some advantage from it? But who has any
  right to find fault with a man who chooses to enjoy a pleasure that has no
  annoying consequences, or one who avoids a pain that produces no resultant
  pleasure?" Section 1.10.33 of "de Finibus Bonorum et Malorum", written by
  Cicero in 45 BC "At vero eos et accusamus et iusto odio dignissimos ducimus
  qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et
  quas molestias excepturi sint occaecati cupiditate non provident, similique
  sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
  fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero
  tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
  quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
  repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
  necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
  non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut
  reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus
  asperiores repellat." 1914 translation by H. Rackham "On the other hand, we
  denounce with righteous indignation and dislike men who are so beguiled and
  demoralized by the charms of pleasure of the moment, so blinded by desire,
  that they cannot foresee the pain and trouble that are bound to ensue; and
  equal blame belongs to those who fail in their duty through weakness of will,
  which is the same as saying through shrinking from toil and pain. These cases
  are perfectly simple and easy to distinguish. In a free hour, when our power
  of choice is untrammelled and when nothing prevents our being able to do what
  we like best, every pleasure is to be welcomed and every pain avoided. But in
  certain circumstances and owing to the claims of duty or the obligations of
  business it will frequently occur that pleasures have to be repudiated and
  annoyances accepted. The wise man therefore always holds in these matters to
  this principle of selection: he rejects pleasures to secure other greater
  pleasures, or else he endures pains to avoid worse pains."
</p>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #f1f1f1;
  font-family: 'montserrat', sans-serif;
}
.header {
  height: 100vh;
  width: 100%;
  background: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1572143059/bg_vuimc0.jpg)
    no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}
p {
  padding: 20px 40px;
  text-align: justify;
}

::-webkit-scrollbar {
  background: #ddd;
  width: 14px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 10px #00000070;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(125deg, #3498db, #34495e);
  border-radius: 10px;
}

Responsive contact info with dark theme

amazingcss.super@gmail.com — Sun, 27 Oct 2019 10:50:00 GMT

Here is a responsive contact info with dark theme from Darkcode. Just click on the button Run Pen below to see how it works:

How to create a responsive contact info with dark theme

Step 1: Add Html

<div class="contact-section">
  <h1>Contact Us</h1>
  <div class="border"></div>
  <form class="contact-form" action="index.html" method="post">
    <input type="text" class="contact-form-text" placeholder="Your name" />
    <input type="email" class="contact-form-text" placeholder="Your email" />
    <input type="text" class="contact-form-text" placeholder="Your phone" />
    <textarea class="contact-form-text" placeholder="Your message"></textarea>
    <input type="submit" class="contact-form-btn" value="Send" />
  </form>
</div>

Step 2: Add CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
}
.contact-section {
  background: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1572142950/bg_k00qm0.png)
    no-repeat center;
  background-size: cover;
  padding: 40px 0;
}
.contact-section h1 {
  text-align: center;
  color: #ddd;
}
.border {
  width: 100px;
  height: 10px;
  background: #34495e;
  margin: 40px auto;
}

.contact-form {
  max-width: 600px;
  margin: auto;
  padding: 0 10px;
  overflow: hidden;
}

.contact-form-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 16px 0;
  border: 0;
  background: #111;
  padding: 20px 40px;
  outline: none;
  color: #ddd;
  transition: 0.5s;
}
.contact-form-text:focus {
  box-shadow: 0 0 10px 4px #34495e;
}
textarea.contact-form-text {
  resize: none;
  height: 120px;
}
.contact-form-btn {
  float: right;
  border: 0;
  background: #34495e;
  color: #fff;
  padding: 12px 50px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.5s;
}
.contact-form-btn:hover {
  background: #2980b9;
}

Awesome contact info with flip animation

amazingcss.super@gmail.com — Sun, 27 Oct 2019 10:45:00 GMT

Do you know how to create a contact info with flip animation? This post will show you how to do it by Darkcode. Just click on the button Run Pen below to see how it works:

Note: This project also use Font Awesome for creating icons.

How to create a contact info with flip animation

Step 1: Add Html

<div class="container">
  <div class="contact-method">
    <i class="fas fa-envelope"></i>
    <span>example@domain.com</span>
  </div>
  <div class="contact-method">
    <i class="fas fa-mobile-alt"></i>
    <span>+111111111111</span>
  </div>
  <div class="contact-method">
    <i class="fas fa-map-marker-alt"></i>
    <span>New York US</span>
  </div>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
}
.container {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
.contact-method {
  width: 220px;
  height: 140px;
  display: inline-block;
  background: #3498db;
  margin: 10px;
  color: #fff;
  position: relative;
  cursor: pointer;
}
.contact-method i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 30px;
  line-height: 140px;
  background: #34495e;
  z-index: 1;
  transition: transform 0.6s;
}
.contact-method span {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 10px 0;
}

.contact-method:hover i {
  transform: translateY(-40px);
}

Amazing CSS with hover effect on text

amazingcss.super@gmail.com — Sun, 27 Oct 2019 10:40:00 GMT

This post shows you how to create an amazing css with hover effect on text. It is from Darkcode. Just click on the button Run Pen below to see how it works:

How to create a hover effect on text

Step 1: Add Html

<div class="middle">
  <span class="container">
    <div class="text" data-text="Effect">Effect</div>
  </span>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
}
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container {
  position: relative;
  display: inline-block;
  padding: 0 40px;
  cursor: pointer;
}

.text {
  font-size: 100px;
  text-transform: uppercase;
  font-weight: 900;
  position: relative;
  color: #34495e;
}
.text::before {
  content: attr(data-text);
  position: absolute;
  color: #fff;
  width: 0;
  overflow: hidden;
  transition: 0.6s;
}
.container::before {
  content: '';
  width: 0%;
  height: 100%;
  position: absolute;
  background: #2980b9;
  right: 0;
  top: 0;
  transition: 0.6s;
}
.container:hover .text::before,
.container:hover::before {
  width: 100%;
}

Create a simple responsive about section

amazingcss.super@gmail.com — Sun, 27 Oct 2019 10:35:00 GMT

This is a simple responsive about section. And you can apply it to your portfolio project. It is from Darkcode. Just click on the button Run Pen below to see how it works:

How to create a simple responsive about section

Step 1: Add Html

<div class="about-section">
  <div class="inner-width">
    <h1>About Us</h1>
    <div class="border"></div>
    <div class="about-section-row">
      <div class="about-section-col">
        <div class="about">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
            provident ea hic, neque amet sequi temporibus iure aliquid placeat
            inventore. Quae dolores dolore, cum nulla quas ipsum facere maxime,
            necessitatibus!
          </p>
          <a href="#">Read More</a>
        </div>
      </div>
      <div class="about-section-col">
        <div class="skills">
          <div class="skill">
            <div class="title">Web Design</div>
            <div class="progress">
              <div class="progress-bar p1"><span>90%</span></div>
            </div>
          </div>

          <div class="skill">
            <div class="title">UI Design</div>
            <div class="progress">
              <div class="progress-bar p2"><span>70%</span></div>
            </div>
          </div>

          <div class="skill">
            <div class="title">UX Design</div>
            <div class="progress">
              <div class="progress-bar p3"><span>50%</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Step 2: Add CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'open sans', sans-serif;
}
.about-section {
  width: 100%;
  background: #f1f1f1;
  padding: 40px 0;
}
.inner-width {
  max-width: 1000px;
  overflow: hidden;
  padding: 0 20px;
  margin: auto;
}
.about-section h1 {
  text-align: center;
}
.border {
  width: 100px;
  height: 3px;
  background: #e74c3c;
  margin: 40px auto;
}
.about-section-row {
  display: flex;
  flex-wrap: wrap;
}
.about-section-col {
  flex: 50%;
}
.about {
  padding-right: 30px;
}
.about p {
  text-align: justify;
  margin-bottom: 20px;
}
.about a {
  display: inline-block;
  color: #e74c3c;
  text-decoration: none;
  border: 2px solid #e74c3c;
  border-radius: 24px;
  padding: 8px 40px;
  transition: 0.4s linear;
}
.about a:hover {
  color: #fff;
  background: #e74c3c;
}
.skills {
  padding-left: 30px;
}
.skill {
  margin-bottom: 10px;
}
.progress {
  width: 100%;
  height: 12px;
  background: #ddd;
  border-radius: 12px;
}
.progress-bar {
  height: 12px;
  background: #e74c3c;
  border-radius: 12px;
}
.p1 {
  width: 90%;
}
.p2 {
  width: 70%;
}
.p3 {
  width: 50%;
}
.progress-bar span {
  float: right;
  margin-right: 6px;
  line-height: 13px;
  color: #fff;
  font-size: 12px;
}
@media screen and (max-width: 700px) {
  .about-section-col {
    flex: 100%;
    margin: 10px 0;
  }
  .about,
  .skills {
    padding: 0;
  }
  .about {
    text-align: center;
  }
}

Buttons with 3D effects on hover

amazingcss.super@gmail.com — Sun, 27 Oct 2019 10:30:00 GMT

This post shows you how to create buttons with 3D effects on hover, which are created by Darkcode. To see how it works, just click on the button Run Pen below:

How to create buttons with 3D effects on hover

Step 1: Add Html

<div class="container">
  <button class="btn btn1">Hover Me</button>
  <button class="btn btn2">Hover Me</button>
  <button class="btn btn3">Hover Me</button>
  <button class="btn btn4">Hover Me</button>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #f1f1f1;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  width: 220px;
  height: 50px;
  background: #6a89cc;
  margin: 40px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  font-family: 'montserrat', sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  transition: 0.4s;
  transform-style: preserve-3d;
  perspective: 800px;
}

.btn::after {
  content: '';
  position: absolute;
  background: #4a69bd;
  transition: 0.4s;
}

.btn1:hover {
  transform: rotateX(-20deg);
}
.btn1:after {
  width: 100%;
  height: 24px;
  top: -24px;
  left: 0;
  transform-origin: 0 100%;
  transform: rotateX(90deg);
}

.btn2:hover {
  transform: rotateX(20deg);
}
.btn2:after {
  width: 100%;
  height: 24px;
  top: 100%;
  left: 0;
  transform-origin: 0 0;
  transform: rotateX(-90deg);
}

.btn3:hover {
  transform: rotateY(20deg);
}

.btn3::after {
  width: 30px;
  height: 100%;
  left: -30px;
  top: 0;
  transform-origin: 100% 0;
  transform: rotateY(-90deg);
}

.btn4:hover {
  transform: rotateY(-20deg);
}

.btn4::after {
  width: 30px;
  height: 100%;
  left: 100%;
  top: 0;
  transform-origin: 0 0;
  transform: rotateY(90deg);
}

Amazing css with hover effect on image

amazingcss.super@gmail.com — Thu, 24 Oct 2019 00:40:00 GMT

This is an amazing css with hover effect on image by html and css only from DarkCode. Just click on the button Run Pen to see how it works:

How to create an amazing css with hover effect on image

Step 1: Add Html

<div class="image middle">
  <img
    src="https://res.cloudinary.com/drcrre4xg/image/upload/v1571848483/img_gfo5ks.jpg"
    alt=""
  />
  <div class="image-content">
    <h1>Image Title</h1>
    <div class="icons">
      <a href="#" class="icon fas fa-heart"></a>
      <a href="#" class="icon fas fa-comment"></a>
      <a href="#" class="icon fas fa-share"></a>
    </div>
  </div>
</div>

Step 2: Add CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'montserrat';
}
body {
  background: #ddd;
}
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image {
  width: 440px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
}

.image-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
}
.image-content h1 {
  color: #fff;
  text-transform: uppercase;
  transform: translateY(20px);
  transition: 0.4s;
}
.image:hover .image-content h1 {
  transform: translateY(0px);
}
.icons {
  position: absolute;
  right: 40px;
  bottom: 40px;
}
.icon {
  text-decoration: none;
  color: #333;
  font-size: 22px;
  margin: 0 10px;
  transform: translateY(80px);
}
.image:hover .icon {
  transform: translateY(0px);
}
.icon:nth-child(1) {
  transition: transform 0.4s 0.05s, color 0.4s;
}
.icon:nth-child(2) {
  transition: transform 0.4s 0.1s, color 0.4s;
}
.icon:nth-child(3) {
  transition: transform 0.4s 0.15s, color 0.4s;
}
.icon:hover {
  color: #3498db;
}
.image-content::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  width: 100%;
  height: 0px;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  transition: 0.5s;
}
.image-content:hover::before {
  height: 140px;
}

Hidden text animation with html and css

amazingcss.super@gmail.com — Thu, 24 Oct 2019 00:40:00 GMT

Below is a hidden text animation from Darkcode. It is hidden by default and only be shown when hovering. To see how it works, just click on the button Run Pen:

How to create a hidden text animation

Step 1: Add Html

<div class="text middle">
  <span>D</span>
  <span class="hidden">A</span>
  <span class="hidden">R</span>
  <span class="hidden">K</span>
  <span>C</span>
  <span class="hidden">O</span>
  <span class="hidden">D</span>
  <span class="hidden">E</span>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #487eb0;
}
.middle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
}
.text {
  color: #fff;
  font-size: 70px;
  font-family: 'montserrat';
  font-weight: 900;
  cursor: pointer;
}
.hidden {
  max-width: 0;
  opacity: 0;
  transition: 0.5s ease-in;
}
.text:hover .hidden {
  opacity: 1;
  max-width: 1em;
}

Glitch text effect like TikTok

amazingcss.super@gmail.com — Thu, 24 Oct 2019 00:35:00 GMT

This is a new loading animation idea created by Darkcode. It is also simple but awesome. To see how it works, just click on the button Run Pen:

How to create a glitch text effect like TikTok

Step 1: Add Html

<div class="text middle" data-text="Glitch Effect">
  Glitch Effect
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
  background: #000;
}

.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text {
  color: #fff;
  text-transform: uppercase;
  font-size: 60px;
  text-align: center;
  letter-spacing: 14px;
}

.text::before,
.text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.text::before {
  color: #ff00c1;
  animation: glitch-effect 3s infinite;
}

.text::after {
  color: #3498db;
  animation: glitch-effect 2s infinite;
}

@keyframes glitch-effect {
  0% {
    left: -2px;
    top: -2px;
  }
  25% {
    left: 2px;
    top: 0px;
  }
  50% {
    left: -1px;
    top: 2px;
  }
  75% {
    left: 1px;
    top: -1px;
  }
  100% {
    left: 0px;
    top: -2px;
  }
}

New loading animation idea

amazingcss.super@gmail.com — Thu, 24 Oct 2019 00:30:00 GMT

This is a new loading animation idea created by Darkcode. It is also simple but awesome. To see how it works, just click on the button Run Pen:

How to create a new loading animation idea

Step 1: Add Html

<div class="loading">
  <span>Loading...</span>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #34495e;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'montserrat', sans-serif;
}

.loading {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  border-radius: 50%;
  border-top: 10px solid #e74c3c;
  position: relative;
  animation: a1 2s linear infinite;
}

.loading::before,
.loading::after {
  content: '';
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: -10px;
  box-sizing: border-box;
  border-radius: 50%;
}

.loading::before {
  border-top: 10px solid #e67e22;
  transform: rotate(120deg);
}

.loading::after {
  border-top: 10px solid #3498db;
  transform: rotate(240deg);
}

.loading span {
  position: absolute;
  width: 200px;
  height: 200px;
  color: #fff;
  text-align: center;
  line-height: 200px;
  animation: a2 2s linear infinite;
}

@keyframes a1 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes a2 {
  to {
    transform: rotate(-360deg);
  }
}

Animated gradient button on hover

amazingcss.super@gmail.com — Wed, 23 Oct 2019 00:59:00 GMT

This is an amazing css with animated gradient button on hover with html and css only from Darkcode. Just click on the button Run Pen to see how it works:

How to create an animated gradient button

Step 1: Add Html

<div class="container">
  <button class="btn btn1">Hover me</button>
  <button class="btn btn2">Hover me</button>
  <button class="btn btn3">Hover me</button>
  <button class="btn btn4">Hover me</button>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #f1f1f1;
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.btn {
  border: none;
  margin: 20px;
  padding: 24px;
  width: 220px;
  font-family: 'montserrat', sans-serif;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  background-size: 200%;
  transition: 0.6s;
}

.btn1 {
  background-image: linear-gradient(to left, #ffc312, #ee5a24, #ffc312);
}

.btn2 {
  background-image: linear-gradient(to left, #c4e538, #009432, #c4e538);
}

.btn3 {
  background-image: linear-gradient(to left, #12cbc4, #0652dd, #12cbc4);
}

.btn4 {
  background-image: linear-gradient(to left, #fda7df, #9980fa, #fda7df);
}

.btn:hover {
  background-position: right;
}

Sliding text animation with html and css

amazingcss.super@gmail.com — Wed, 23 Oct 2019 00:56:00 GMT

This project implements a sliding text animation with html and css only from Darkcode. Just click on the button Run Pen to see how it works:

How to create a sliding text animation

Step 1: Add Html

<div class="animated-text">
  <div class="line">Hi Guys</div>
  <div class="line">Welcome</div>
  <div class="line">In This</div>
  <div class="line">Tutorial</div>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  font-family: montserrat, sans-serif;
  background: black;
}

.animated-text {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2980b9;
  padding: 0 40px;
  height: 60px;
  overflow: hidden;
}

.line {
  text-transform: uppercase;
  text-align: center;
  font-size: 40px;
  line-height: 60px;
}

.line:first-child {
  animation: anim 12s infinite;
}

@keyframes anim {
  0% {
    margin-top: 0;
  }
  16% {
    margin-top: -60px;
  }
  33% {
    margin-top: -120px;
  }
  50% {
    margin-top: -180px;
  }
  66% {
    margin-top: -120px;
  }
  82% {
    margin-top: -60px;
  }
  100% {
    margin-top: 0;
  }
}

Amazing design of pagination with html and css

amazingcss.super@gmail.com — Wed, 23 Oct 2019 00:55:00 GMT

Pagination is very useful for a blog with lots of posts. Below is an amazing design of pagination created by Darkcode. To see how it works, just click on the button Run Pen:

Note: This project also uses Font Awesome for creating icons.

How to create an amazing design of pagination

Step 1: Add Html

<div class="pagination">
  <a href="#" class="prev"><i class="fas fa-angle-left"></i></a>
  <a href="#" class="num active">1</a>
  <a href="#" class="num">2</a>
  <a href="#" class="num">3</a>
  <a href="#" class="num">4</a>
  <a href="#" class="num">5</a>
  <a href="#" class="next"><i class="fas fa-angle-right"></i></a>
</div>

Step 2: Add CSS

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

body {
  background: #f1f1f1;
}

.pagination {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}

.pagination a {
  margin: 6px 1px;
  display: inline-block;
  width: 60px;
  background: #2c3e50;
  height: 60px;
  line-height: 60px;
  color: #fff;
  font-weight: 600;
  transition: 0.3s;
  position: relative;
  padding-right: 26px;
}
.prev,
.next {
  padding-right: 12px !important;
  font-size: 20px;
}
.pagination a:hover {
  color: #e74c3c;
}

.active {
  color: #e74c3c !important;
}

.prev {
  border-radius: 30px 0 0 30px;
}

.next {
  border-radius: 0 30px 30px 0;
}

.pagination a::before,
.pagination a:after {
  content: '';
  position: absolute;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
.num::before,
.next::before {
  border-right: 20px solid #2c3e50;
  right: 100%;
}

.num:after,
.prev:after {
  border-right: 20px solid #f1f1f1;
  right: 0;
}

Simple but awesome loading animation

amazingcss.super@gmail.com — Wed, 23 Oct 2019 00:50:00 GMT

Below is a simple but awesome loading animation with html and css only from Darkcode. Just click on the button Run Pen to see how it works:

How to create an awesome loading animation

Step 1: Add Html

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #344;
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
}

.box {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #e74c3c;
}

.box:nth-child(1) {
  animation: a1 2s infinite linear;
}

.box:nth-child(2) {
  animation: a2 2s infinite linear;
}

@keyframes a1 {
  0% {
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
  }
  12.5% {
    top: 0;
    left: 0;
    width: 60px;
    height: 30px;
  }
  25% {
    top: 0;
    left: 0;
    width: 60px;
    height: 30px;
  }
  37.5% {
    top: 0;
    left: 30px;
    width: 30px;
    height: 30px;
  }
  50% {
    top: 0;
    left: 30px;
    width: 30px;
    height: 30px;
  }
  62.5% {
    top: 0;
    left: 30px;
    width: 30px;
    height: 60px;
  }
  75% {
    top: 0;
    left: 30px;
    width: 30px;
    height: 60px;
  }
  87.5% {
    top: 30px;
    left: 30px;
    width: 30px;
    height: 30px;
  }
  100% {
    top: 30px;
    left: 30px;
    width: 30px;
    height: 30px;
  }
}

@keyframes a2 {
  0% {
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
  }
  12.5% {
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
  }
  25% {
    right: 0;
    bottom: 0;
    width: 60px;
    height: 30px;
  }
  37.5% {
    right: 0;
    bottom: 0;
    width: 60px;
    height: 30px;
  }
  50% {
    right: 30px;
    bottom: 0;
    width: 30px;
    height: 30px;
  }
  62.5% {
    right: 30px;
    bottom: 0;
    width: 30px;
    height: 30px;
  }
  75% {
    right: 30px;
    bottom: 0;
    width: 30px;
    height: 60px;
  }
  87.5% {
    right: 30px;
    bottom: 0;
    width: 30px;
    height: 60px;
  }
  100% {
    right: 30px;
    bottom: 30px;
    width: 30px;
    height: 30px;
  }
}

Amazing 404 error page with html and css

amazingcss.super@gmail.com — Wed, 23 Oct 2019 00:40:00 GMT

This is an amazing 404 error page created by Darkcode with html and css. Just click on the button Run Pen below to see how it works:

How to create an amazing 404 error page

Step 1: Add Html

<div class="container">
  <h2>Oops! Page not found.</h2>
  <h1>404</h1>
  <p>We can't find the page you're looking for.</p>
  <a href="#">Go back home</a>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
  min-height: 100vh;
  background-image: linear-gradient(125deg, #6a89cc, #b8e994);
}

.container {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #343434;
}

.container h1 {
  font-size: 160px;
  margin: 0;
  font-weight: 900;
  letter-spacing: 20px;
  background: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1571761599/bg_g4leql.jpg)
    center no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

.container a {
  text-decoration: none;
  background: #e55039aa;
  color: #fff;
  padding: 12px 24px;
  display: inline-block;
  border-radius: 25px;
  font-size: 14px;
  text-transform: uppercase;
  transition: 0.4s;
}

.container a:hover {
  background: #e55039;
}

Amazing CSS with contact info section

amazingcss.super@gmail.com — Wed, 23 Oct 2019 00:30:00 GMT

Here is an amazing css contact info section with only html and css from Darkcode. To see how it works, just click on the button Run Pen below:

Note: This project also uses Font Awesome for creating icons.

How to create an amazing CSS with contact info section

Step 1: Add Html

<div class="contact-info">
  <div class="card">
    <i class="card-icon far fa-envelope"></i>
    <p>email@domain.com</p>
  </div>

  <div class="card">
    <i class="card-icon fas fa-phone"></i>
    <p>+000000000000</p>
  </div>

  <div class="card">
    <i class="card-icon fas fa-map-marker-alt"></i>
    <p>New York, USA</p>
  </div>
</div>

Step 2: Add CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
  box-sizing: border-box;
}
body {
  background: #f1f1f1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info {
  display: flex;
  width: 100%;
  max-width: 1200px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.card {
  background: #2f3542;
  padding: 0 20px;
  margin: 0 10px;
  width: calc(33% - 20px);
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
}

.card-icon {
  font-size: 28px;
  background: #ff6348;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px !important;
  border-radius: 50%;
  transition: 0.3s linear;
}

.card:hover .card-icon {
  background: none;
  color: #ff6348;
  transform: scale(1.6);
}

.card p {
  margin-top: 20px;
  font-weight: 300;
  letter-spacing: 2px;
  max-height: 0;
  opacity: 0;
  transition: 0.3s linear;
}

.card:hover p {
  max-height: 40px;
  opacity: 1;
}

@media screen and (max-width: 800px) {
  .contact-info {
    flex-direction: column;
  }
  .card {
    width: 100%;
    max-width: 300px;
    margin: 10px 0;
  }
}

Awesome signup form with html and css

amazingcss.super@gmail.com — Fri, 18 Oct 2019 08:30:00 GMT

This is an awesome signup form with only html and css from DarkCode. To see how it works, just click on the button Run Pen below:

Step 1: Add Html

<div class="signup-form">
  <form class="" action="index.html" method="post">
    <h1>Sign Up</h1>
    <input type="text" placeholder="Full Name" class="txtb">
    <input type="email" placeholder="Email" class="txtb">
    <input type="password" placeholder="Password" class="txtb">
    <input type="submit" value="Create Account" class="signup-btn">
    <a href="#">Already Have one ?</a>
  </form>
</div>

Step 2: Add CSS

body{
  margin: 0;
  padding: 0;
  background: #487eb0;
}
.signup-form{
  width: 300px;
  padding: 20px;
  text-align: center;
  background: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1571359955/bg_z91s8y.png);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
}
.signup-form h1{
  margin-top: 100px;
  font-family: 'Permanent Marker', cursive;
  color: #fff;
  font-size: 40px;
}
.signup-form input{
  display: block;
  width: 100%;
  padding: 0 16px;
  height: 44px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  border: none;
  font-family: "montserrat",sans-serif;
}
.txtb{
  margin: 20px 0;
  background: rgba(255,255,255,.5);
  border-radius: 6px;
}
.signup-btn{
  margin-top: 60px;
  margin-bottom: 20px;
  background: #487eb0;
  color: #fff;
  border-radius: 44px;
  cursor: pointer;
  transition: 0.8s;
}
.signup-btn:hover{
  transform: scale(0.96);
}
.signup-form a{
  text-decoration: none;
  color: #fff;
  font-family: "montserrat",sans-serif;
  font-size: 14px;
  padding: 10px;
  transition: 0.8s;
  display: block;
}
.signup-form a:hover{
  background: rgba(0,0,0,.3);
}

Awesome pricing table with html and css

amazingcss.super@gmail.com — Thu, 17 Oct 2019 06:00:00 GMT

Here is an awesome pricing table with only html and css from DarkCode. To see how it works, just click on the button Run Pen below:

How to create awesome pricing table

Step 1: Add Html

<div class="container">
  <div class="pricing-table table1">
    <div class="pricing-header">
      <div class="price"><span>$</span>19</div>
      <div class="title">Basic</div>
    </div>
    <ul class="pricing-list">
      <li><strong>20GB</strong> Storage</li>
      <div class="border"></div>
      <li><strong>4</strong> Email Address</li>
      <div class="border"></div>
      <li><strong>1</strong> Domain Name</li>
      <div class="border"></div>
      <li><strong>24h</strong> Support</li>
    </ul>
    <a href="#">Order Now</a>
  </div>

  <div class="pricing-table table2">
    <div class="pricing-header">
      <div class="price"><span>$</span>39</div>
      <div class="title">Pro</div>
    </div>
    <ul class="pricing-list">
      <li><strong>60GB</strong> Storage</li>
      <div class="border"></div>
      <li><strong>10</strong> Email Address</li>
      <div class="border"></div>
      <li><strong>3</strong> Domain Name</li>
      <div class="border"></div>
      <li><strong>24h</strong> Support</li>
    </ul>
    <a href="#">Order Now</a>
  </div>

  <div class="pricing-table table3">
    <div class="pricing-header">
      <div class="price"><span>$</span>79</div>
      <div class="title">Premiem</div>
    </div>
    <ul class="pricing-list">
      <li><strong>200GB</strong> Storage</li>
      <div class="border"></div>
      <li><strong>30</strong> Email Address</li>
      <div class="border"></div>
      <li><strong>10</strong> Domain Name</li>
      <div class="border"></div>
      <li><strong>24h</strong> Support</li>
    </ul>
    <a href="#">Order Now</a>
  </div>
</div>

Step 2: Add CSS

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  list-style: none;
}

body {
  min-height: 100vh;
  background-image: linear-gradient(125deg, #34495e, #2ecc71);
}

.container {
  max-width: 1000px;
  margin: auto;
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
}

.pricing-table {
  background: #f1f1f1;
  flex: 1;
  margin: 10px;
  text-transform: uppercase;
}

.pricing-header {
  color: #fff;
  position: relative;
  margin-bottom: 20px;
}

.price {
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.price span {
  font-size: 30px;
}

.title {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 80%;
  max-width: 360px;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
}

.pricing-list {
  padding: 10px 20px;
}

.pricing-list li {
  margin: 8px 0;
  font-size: 14px;
  color: #344;
  text-align: center;
}

.border {
  width: 80px;
  height: 1px;
  background: #ddd;
  margin: auto;
}

.pricing-table a {
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  border: 1px solid;
  max-width: 360px;
  transition: 0.2s linear;
}
.pricing-table a:hover {
  border-radius: 30px;
}
.table1 .pricing-header {
  background: #2980b9;
}
.table2 .pricing-header {
  background: #2c3e50;
}
.table3 .pricing-header {
  background: #c0392b;
}

.table1 .title {
  background-image: linear-gradient(125deg, #3498db, #9b59b6);
}
.table2 .title {
  background-image: linear-gradient(125deg, #34495e, #95a5a6);
}
.table3 .title {
  background-image: linear-gradient(125deg, #e74c3c, #f39c12);
}

.table1 a {
  color: #2980b9;
}
.table2 a {
  color: #2c3e50;
}
.table3 a {
  color: #c0392b;
}

.table1 a:hover {
  background: #2980b9;
  color: #fff;
}
.table2 a:hover {
  background: #2c3e50;
  color: #fff;
}
.table3 a:hover {
  background: #c0392b;
  color: #fff;
}

@media screen and (max-width: 780px) {
  .pricing-table {
    flex: 100%;
  }
}

Cool water text animation

amazingcss.super@gmail.com — Wed, 16 Oct 2019 08:30:00 GMT

This is a cool water text animation with only html and css again from DarkCode. Just click on the button Run Pen below to see how it works:

How to create cool water text animation

Step 1: Add Html

<div class="middle">
  <h1>Animation</h1>
</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
  background: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1571101012/bg_v0tw74.png)
    no-repeat;
  background-size: cover;
}
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.middle h1 {
  font-size: 100px;
  text-transform: uppercase;
  font-weight: 900;
  color: #2c3e5036;
  background-image: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1571101002/water_zvupjx.png);
  -webkit-background-clip: text;
  animation: water 15s infinite;
}
@keyframes water {
  from {
    background-position: left 0 top 0;
  }
  to {
    background-position: left 1000px top 0;
  }
}

Awesome hover effects on button

amazingcss.super@gmail.com — Sun, 13 Oct 2019 17:15:00 GMT

Here are awesome hover effects on button from DarkCode with only html and css. To see how it works, just click on the button Run Pen below:

How to create awesome hover effects on button

Step 1: Add Html

<div class="container">
  <button class="btn btn1">Hover Me</button>
  <button class="btn btn2">Hover Me</button>
  <button class="btn btn3">Hover Me</button>
  <button class="btn btn4">Hover Me</button>
</div>

Step 2: Add CSS

/* Common styles */
body {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Button style */
.btn {
  border: 1px solid #3498db;
  background: none;
  padding: 10px 20px;
  font-size: 20px;
  font-family: 'montserrat';
  cursor: pointer;
  margin: 10px;
  transition: 0.8s;
  position: relative;
  overflow: hidden;
}
.btn1,
.btn2 {
  color: #3498db;
}
.btn3,
.btn4 {
  color: #fff;
}
.btn1:hover,
.btn2:hover {
  color: #fff;
}
.btn3:hover,
.btn4:hover {
  color: #3498db;
}
.btn::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 0%;
  background: #3498db;
  z-index: -1;
  transition: 0.8s;
}
.btn1::before,
.btn3::before {
  top: 0;
  border-radius: 0 0 50% 50%;
}
.btn2::before,
.btn4::before {
  bottom: 0;
  border-radius: 50% 50% 0 0;
}
.btn3::before,
.btn4::before {
  height: 180%;
}
.btn1:hover::before,
.btn2:hover::before {
  height: 180%;
}
.btn3:hover::before,
.btn4:hover::before {
  height: 0%;
}

Social icons with tooltip by Jon Milner

amazingcss.super@gmail.com — Tue, 01 Oct 2019 08:00:00 GMT

They are social icons with tooltip created by Jon Milner with html and scss. Just click on the button Run Pen below to see how it works:

Note: In this example, Jon Milner uses Fontawesome for creating social icons. But you can use other libraries or create them by your own way.

Step 1: Add Html

<div class="social-icons">
  <a class="social-icon social-icon--codepen">
    <i class="fa fa-codepen"></i>
    <div class="tooltip">Codepen</div>
  </a>
  <a class="social-icon social-icon--github">
    <i class="fa fa-github"></i>
    <div class="tooltip">Github</div>
  </a>
  <a class="social-icon social-icon--twitter">
    <i class="fa fa-twitter"></i>
    <div class="tooltip">Twitter</div>
  </a>
  <a class="social-icon social-icon--dribbble">
    <i class="fa fa-dribbble"></i>
    <div class="tooltip">Dribbble</div>
  </a>
  <a class="social-icon social-icon--instagram">
    <i class="fa fa-instagram"></i>
    <div class="tooltip">Instagram</div>
  </a>
  <a class="social-icon social-icon--linkedin">
    <i class="fa fa-linkedin"></i>
    <div class="tooltip">LinkedIn</div>
  </a>
  <a class="social-icon social-icon--facebook">
    <i class="fa fa-facebook"></i>
    <div class="tooltip">Facebook</div>
  </a>
</div>

Step 2: Add CSS

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

/* Color Variables */
$color-codepen: #000;
$color-github: #4284c0;
$color-twitter: #2b97f1;
$color-dribbble: #ef5a92;
$color-instagram: #527fa6;
$color-linkedin: #006599;
$color-facebook: #3b5a9b;

/* Social Icon Mixin */
@mixin social-icon($color) {
  background: $color;
  color: #fff;

  .tooltip {
    background: $color;
    color: currentColor;

    &:after {
      border-top-color: $color;
    }
  }
}

/* Social Icons */
.social-icons {
  display: flex;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 2.5rem;
  text-decoration: none;
  transition: all 0.15s ease;

  &:hover {
    color: #fff;

    .tooltip {
      visibility: visible;
      opacity: 1;
      transform: translate(-50%, -150%);
    }
  }

  &:active {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
  }

  &--linkedin {
    @include social-icon($color-linkedin);
  }
  &--twitter {
    @include social-icon($color-twitter);
  }
  &--codepen {
    @include social-icon($color-codepen);
  }
  &--facebook {
    @include social-icon($color-facebook);
  }
  &--instagram {
    @include social-icon($color-instagram);
  }
  &--dribbble {
    @include social-icon($color-dribbble);
  }
  &--github {
    @include social-icon($color-github);
  }

  i {
    position: relative;
    top: 1px;
  }
}

/* Tooltips */
.tooltip {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  padding: 0.8rem 1rem;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-50%, -100%);
  transition: all 0.3s ease;
  z-index: 1;

  &:after {
    display: block;
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 0;
    height: 0;
    content: '';
    border: solid;
    border-width: 10px 10px 0 10px;
    border-color: transparent;
    transform: translate(-50%, 100%);
  }
}

Single element CSS-Only absolute center overlay spinner by MattIn4D

amazingcss.super@gmail.com — Fri, 27 Sep 2019 08:00:00 GMT

Below is an absolute center overlay spinner created by MattIn4D with single element CSS-Only. To see how it works, just click on the button Run Pen:

How to create an absolute center overlay spinner

Step 1: Add Html

<div class="loading">Loading&#8230;</div>

Step 2: Add CSS

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, 
    rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, 
    rgba(0, 0, 0, 0.75) 0 1.5em 0 0, 
    rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, 
    rgba(0, 0, 0, 0.5) -1.5em 0 0 0, 
    rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, 
    rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, 
    rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, 
    rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, 
    rgba(0, 0, 0, 0.75) 0 1.5em 0 0, 
    rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, 
    rgba(0, 0, 0, 0.75) -1.5em 0 0 0, 
    rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, 
    rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, 
    rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

// Firefox 64 - 20190102
// If you see wobbly dots spinning very slowly,
// move your mouse around over the overlay to see the real behavior
// Seems to be a quirk/bug specific to codepen...

Pure CSS horizontal collapsible by Aysha Anggraini

amazingcss.super@gmail.com — Sun, 22 Sep 2019 18:00:00 GMT

This is an awesome horizontal collapsible by Aysha Anggraini with html and scss. To see how it works, just click on the button Run Pen below:

How to create a horizontal collapsible

Step 1: Add Html

<body>
  <div class="container">
    <ul class="accordion">
      <li class="tabs">
        <div class="social-links twitter-icon">
          <a href="https://twitter.com/renettarenula">Twitter</a>
        </div>
        <div class="paragraph">
          <h1>Twitter</h1>
          <p>
            My thoughts in 140 characters or less. Sometimes, I do not know how
            to correctly use Twitter.
          </p>
        </div>
      </li>
      <li class="tabs">
        <div class="social-links facebook-icon">
          <a href="https://facebook.com">Facebook</a>
        </div>
        <div class="paragraph">
          <h1>Facebook</h1>
          <p>
            Where I get to stalk my friends and let them stalk me. A place to
            get people to stroke your ego.
          </p>
        </div>
      </li>
      <li class="tabs">
        <div class="social-links linkedin-icon">
          <a href="https://my.linkedin.com/pub/aysha-anggraini/49/a82/a05/"
            >LinkedIn</a
          >
        </div>
        <div class="paragraph">
          <h1>LinkedIn</h1>
          <p>
            I act totally professional on this one. It is what the recruiters
            see, you see.
          </p>
        </div>
      </li>
      <li class="tabs">
        <div class="social-links insta-icon">
          <a href="http://instagram.com/renettarenula">Instagram</a>
        </div>
        <div class="paragraph">
          <h1>Instagram</h1>
          <p>
            Where I post my duckface pictures. Occasionally, I would post
            pictures of my food and my cats.
          </p>
        </div>
      </li>
      <li class="tabs">
        <div class="social-links youtube-icon">
          <a href="https://youtube.com">Youtube</a>
        </div>
        <div class="paragraph">
          <h1>YouTube</h1>
          <p>
            Just kidding! I do not have a YouTube account. I'm not too fond of
            the camera.
          </p>
        </div>
      </li>
      <li class="tabs">
        <div class="social-links tumblr-icon">
          <a href="https://renettarenula.tumblr.com/">Tumblr</a>
        </div>
        <div class="paragraph">
          <h1>Tumblr</h1>
          <p>
            I have a tumblr but I don't really use it. I still prefer WordPress.
            I'm quite old-fashioned.
          </p>
        </div>
      </li>
      <li class="tabs">
        <div class="social-links dribbble-icon">
          <a href="http://dribbble.com">Dribbble</a>
        </div>
        <div class="paragraph">
          <h1>Dribbble</h1>
          <p>
            I do not have a Dribbble account. Would any of you be so kind and
            send me an invite?
          </p>
        </div>
      </li>
    </ul>
  </div>
</body>

Step 2: Add CSS

@import 'compass/css3';

/* Updated version - 24th Nov 2014 */

@import 'compass/reset';
@import 'compass/css3';

/* Variables */

$backgroundColor: #f77462;
$list: #6dc5dd;
$border: #5ab2ca;
$geneicons: #fff;

body {
  background: $backgroundColor;
  font-family: Lato, sans-serif;
}

@font-face {
  font-family: 'Genericons';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot');
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.woff')
      format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot')
      format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class*='genericon'] {
  display: inline-block;
  width: 16px;
  height: 16px;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1;
  font-family: 'Genericons';
  text-decoration: inherit;
  font-weight: normal;
  font-style: normal;
  vertical-align: top;
}

/* IE7 */
[class*='genericon'] {
  *overflow: auto;
  *zoom: 1;
  *display: inline;
}

.container {
  margin: 100px auto;
}

.accordion {
  background: $border;
  width: 100%;
  min-width: 950px;
  display: block;
  list-style-type: none;
  overflow: hidden;
  height: 200px;
  font-size: 0;
}

.tabs {
  display: inline-block;
  background-color: $list;
  border-right: $border 1px solid;
  width: 80px;
  height: 200px;
  overflow: hidden;
  position: relative;
  margin: 0;
  font-size: 16px;
  @include transition(all 0.4s 0.1s ease-in-out);

  &:hover {
    width: 450px;

    .social-links {
      a {
        &:before {
          margin-left: -100px;
        }

        &:after {
          margin-left: -5px;
        }
      }
    }
  }

  .paragraph {
    position: relative;
    width: 360px;
    margin-left: 80px;
    padding: 50px 0 0 10px;
    height: 200px;
    background: #fff;

    h1 {
      font-size: 2.5em;
      margin-bottom: 10px;
    }

    p {
      font-size: 0.88em;
      line-height: 1.5em;
      padding-right: 30px;
    }
  }
}

.social-links {
  display: block;

  a {
    display: block;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;

    &:before,
    &:after {
      @include transition(all 0.4s 0.1s ease-in-out);
      width: 80px;
      height: 200px;
      position: absolute;
      text-indent: 0;
      padding-top: 90px;
      padding-left: 25px;
      display: block;
      font: normal 30px Genericons;
      color: $geneicons;
    }

    &:after {
      font-size: 48px;
      padding-left: 20px;
      padding-top: 80px;
      margin-left: 85px;
    }
  }
}

.twitter-icon {
  a {
    &:before,
    &:after {
      content: '\f202';
    }

    &:after {
      @include background-image(linear-gradient(#7adcf9, #4bc9f5));
    }
  }
}

.facebook-icon {
  a {
    &:before,
    &:after {
      content: '\f204';
    }

    &:after {
      @include background-image(linear-gradient(#548abf, #295b9e));
    }
  }
}

.linkedin-icon {
  a {
    &:before,
    &:after {
      content: '\f208';
    }

    &:after {
      @include background-image(linear-gradient(#00a9cd, #0083b4));
    }
  }
}

.insta-icon {
  a {
    &:before,
    &:after {
      content: '\f215';
    }

    &:after {
      @include background-image(linear-gradient(#7fc121, #298733));
    }
  }
}

.youtube-icon {
  a {
    &:before,
    &:after {
      content: '\f213';
    }

    &:after {
      @include background-image(linear-gradient(#df192a, #c41222));
    }
  }
}

.tumblr-icon {
  a {
    &:before,
    &:after {
      content: '\f214';
    }

    &:after {
      @include background-image(linear-gradient(#283e56, #325372));
    }
  }
}

.dribbble-icon {
  a {
    &:before,
    &:after {
      content: '\f201';
    }

    &:after {
      @include background-image(linear-gradient(#e03a70, #f189b8));
    }
  }
}

Colourful flower popup menu by Jasper LaChance

amazingcss.super@gmail.com — Fri, 20 Sep 2019 18:00:00 GMT

This is a colourful flower popup menu with html and pure css created by Jasper LaChance. To see how it works, just click on the button Run Pen below:

Step 1: Add Html

<nav class="menu">
  <!-- Use input to handle click event -->
  <input
    type="checkbox"
    href="#"
    class="menu-open"
    name="menu-open"
    id="menu-open"
  />
  <label class="menu-open-button" for="menu-open">
    <span class="lines line-1"></span>
    <span class="lines line-2"></span>
    <span class="lines line-3"></span>
  </label>

  <a href="#" class="menu-item blue"> <i class="fa fa-anchor"></i> </a>
  <a href="#" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
  <a href="#" class="menu-item red"> <i class="fa fa-heart"></i> </a>
  <a href="#" class="menu-item purple"> <i class="fa fa-microphone"></i> </a>
  <a href="#" class="menu-item orange"> <i class="fa fa-star"></i> </a>
  <a href="#" class="menu-item lightblue"> <i class="fa fa-diamond"></i> </a>
</nav>

Step 2: Add CSS

body {
  padding: 0;
  margin: 0;
  background: #596778;
  color: #eeeeee;
  text-align: center;
  font-family: 'Lato', sans-serif;
}

@media screen and (max-width: 700px) {
  body {
    padding: 170px 0 0 0;
    width: 100%;
  }
}

a {
  color: inherit;
}

.menu-item,
.menu-open-button {
  background: #eeeeee;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  color: #ffffff;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-open {
  display: none;
}

.lines {
  width: 25px;
  height: 3px;
  background: #596778;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}

.line-1 {
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);
}

.line-2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.line-3 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .line-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked + .menu-open-button .line-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked + .menu-open-button .line-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 80px;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
  font-size: 26px;
}

/* .menu-item {
   transition: all 0.1s ease 0s;
} */

.menu-item:hover {
  background: #eeeeee;
  color: #3290b1;
}

.menu-item:nth-child(3) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(4) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(5) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(6) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(7) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(8) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-item:nth-child(9) {
  -webkit-transition-duration: 180ms;
  transition-duration: 180ms;
}

.menu-open-button {
  z-index: 2;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.menu-open:checked ~ .menu-item:nth-child(3) {
  transition-duration: 180ms;
  -webkit-transition-duration: 180ms;
  -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
  transform: translate3d(0.08361px, -104.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
  transition-duration: 280ms;
  -webkit-transition-duration: 280ms;
  -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
  transform: translate3d(90.9466px, -52.47586px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(5) {
  transition-duration: 380ms;
  -webkit-transition-duration: 380ms;
  -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
  transform: translate3d(90.9466px, 52.47586px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(6) {
  transition-duration: 480ms;
  -webkit-transition-duration: 480ms;
  -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
  transform: translate3d(0.08361px, 104.99997px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(7) {
  transition-duration: 580ms;
  -webkit-transition-duration: 580ms;
  -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
  transform: translate3d(-90.86291px, 52.62064px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(8) {
  transition-duration: 680ms;
  -webkit-transition-duration: 680ms;
  -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
  transform: translate3d(-91.03006px, -52.33095px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(9) {
  transition-duration: 780ms;
  -webkit-transition-duration: 780ms;
  -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
  transform: translate3d(-0.25084px, -104.9997px, 0);
}

.blue {
  background-color: #669ae1;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.blue:hover {
  color: #669ae1;
  text-shadow: none;
}

.green {
  background-color: #70cc72;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.green:hover {
  color: #70cc72;
  text-shadow: none;
}

.red {
  background-color: #fe4365;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.red:hover {
  color: #fe4365;
  text-shadow: none;
}

.purple {
  background-color: #c49cde;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.purple:hover {
  color: #c49cde;
  text-shadow: none;
}

.orange {
  background-color: #fc913a;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.orange:hover {
  color: #fc913a;
  text-shadow: none;
}

.lightblue {
  background-color: #62c2e4;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}

.lightblue:hover {
  color: #62c2e4;
  text-shadow: none;
}

.credit {
  margin: 24px 20px 120px 0;
  text-align: right;
  color: #eeeeee;
}

.credit a {
  padding: 8px 0;
  color: #c49cde;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.credit a:hover {
  text-decoration: underline;
}

/* 
Also featured on MaterialUp!
http://www.materialup.com/posts/colourful-flower-popup-menu
*/

Responsive CSS image slider by Dudley Storey

amazingcss.super@gmail.com — Thu, 19 Sep 2019 18:00:00 GMT

Below is a responsive CSS image slider created by Dudley Storey. Just click on the button Run Pen below to see how it works:

How to create a responsive css image slider

Step 1: Add Html

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/" />
<div id="slider">
  <figure>
    <img src="austin-fireworks.jpg" alt />
    <img src="taj-mahal_copy.jpg" alt />
    <img src="ibiza.jpg" alt />
    <img src="ankor-wat.jpg" alt />
    <img src="austin-fireworks.jpg" alt />
  </figure>
</div>

Step 2: Add CSS

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

body {
  margin: 0;
}
div#slider {
  overflow: hidden;
}
div#slider figure img {
  width: 20%;
  float: left;
}
div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite;
}

Collection of button hover effects by David Conner

amazingcss.super@gmail.com — Wed, 18 Sep 2019 08:15:00 GMT

This is a collection of button hover effects created by David Conner. To see how amazing it is, just click on the button Run Pen below:

How to create button hover effects

Step 1: Add Html

<section class="buttons">
  <h1>Button Hover Effects</h1>
  <div class="container">
    <a href="https://twitter.com/Dave_Conner" class="btn btn-1">
      <svg>
        <rect x="0" y="0" fill="none" width="100%" height="100%" />
      </svg>
      Hover
    </a>
    <!-- svg hover inspired by https://codepen.io/karimbalaa/pen/qERbBY?editors=110 -->
    <!-- End of Button 1 -->

    <a href="https://twitter.com/Dave_Conner" class="btn btn-2">Hover</a>
    <!--End of Button 2 -->

    <a href="https://twitter.com/Dave_Conner" class="btn btn-3">Hover</a>
    <!--End of Button 3 -->

    <a href="https://twitter.com/Dave_Conner" class="btn btn-4"
      ><span>Hover</span></a
    >
    <!--End of Button 4 -->

    <a href="https://twitter.com/Dave_Conner" class="btn btn-5">Hover</a>
    <!--End of Button 5 -->
  </div>
  <p>
    Follow on
    <a href="https://twitter.com/Dave_Conner" target="_blank">Twitter</a>
  </p>
</section>

Step 2: Add CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400, 100, 900);

//colors
$red: #e1332d;
$white: #fff;

//base styles

* {
  box-sizing: inherit;
  transition-property: all;
  transition-duration: 0.6s;
  transition-timing-function: ease;
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

body {
  background: $red;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

// Main wrap
.buttons {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 100%;
}

// Button wrap
.container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1em;
  text-align: center;

  @media (min-width: 600px) {
    flex-direction: row;
    justify-content: space-between;
  }
}

h1 {
  color: $white;
  font-size: 1.25em;
  font-weight: 900;
  margin: 0 0 2em;

  @media (min-width: 450px) {
    font-size: 1.75em;
  }

  @media (min-width: 760px) {
    font-size: 3.25em;
  }

  @media (min-width: 900px) {
    font-size: 5.25em;
    margin: 0 0 1em;
  }
}

p {
  color: $white;
  font-size: 12px;

  @media (min-width: 600px) {
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0);
    top: 90%;
  }

  @media (max-height: 500px) {
    left: 0;
    position: relative;
    top: 0;
    transform: translate(0, 0);
  }

  a {
    background: rgba($white, 0);
    border-bottom: 1px solid;
    color: $white;
    line-height: 1.4;
    padding: 0.25em;
    text-decoration: none;

    &:hover {
      background: rgba($white, 1);
      color: $red;
    }
  }
}
//button styles

//default button
.btn {
  color: #fff;
  cursor: pointer;
  // display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 0 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;

  //   @media(min-width: 400px) {
  //     display: inline-block;
  //     margin-right: 2.5em;

  //     &:nth-of-type(even) {
  //       margin-right: 0;
  //     }
  //   }

  @media (min-width: 600px) {
    margin: 0 1em 2em;

    //     &:nth-of-type(even) {
    //       margin-right: 2.5em;
    //     }

    //     &:nth-of-type(5) {
    //       margin-right: 0;
    //     }
  }

  &:hover {
    text-decoration: none;
  }
}

/////////////////////////////////
//button one
///////////////////////////////
.btn-1 {
  background: darken($red, 1.5%);
  font-weight: 100;

  svg {
    height: 45px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  rect {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-dasharray: 422, 0;
    transition: all 0.35s linear;
  }
}

.btn-1:hover {
  background: rgba($red, 0);
  font-weight: 900;
  letter-spacing: 1px;

  rect {
    stroke-width: 5;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 48;
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  }
}

////////////////////////////
//button two
//////////////////////////
.btn-2 {
  letter-spacing: 0;
}

.btn-2:hover,
.btn-2:active {
  letter-spacing: 5px;
}

.btn-2:after,
.btn-2:before {
  backface-visibility: hidden;
  border: 1px solid rgba(#fff, 0);
  bottom: 0px;
  content: ' ';
  display: block;
  margin: 0 auto;
  position: relative;
  transition: all 280ms ease-in-out;
  width: 0;
}

.btn-2:hover:after,
.btn-2:hover:before {
  backface-visibility: hidden;
  border-color: #fff;
  transition: width 350ms ease-in-out;
  width: 70%;
}

.btn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 70%;
}

/////////////////////////////
//button -3
///////////////////////////
.btn-3 {
  background: lighten($red, 3%);
  border: 1px solid darken($red, 4%);
  box-shadow: 0px 2px 0 darken($red, 5%), 2px 4px 6px darken($red, 2%);
  font-weight: 900;
  letter-spacing: 1px;
  transition: all 150ms linear;
}

.btn-3:hover {
  background: darken($red, 1.5%);
  border: 1px solid rgba(#000, 0.05);
  box-shadow: 1px 1px 2px rgba(#fff, 0.2);
  color: lighten($red, 18%);
  text-decoration: none;
  text-shadow: -1px -1px 0 darken($red, 9.5%);
  transition: all 250ms linear;
}

/////////////////////////////
//button-4
///////////////////////////
.btn-4 {
  border: 1px solid;
  overflow: hidden;
  position: relative;

  span {
    z-index: 20;
  }

  &:after {
    background: #fff;
    content: '';
    height: 155px;
    left: -75px;
    opacity: 0.2;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: -10;
  }
}

.btn-4:hover {
  &:after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  }
}

/////////////////////////////
//button-5
///////////////////////////
.btn-5 {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-5:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388;
}

Responsive table by Geoff Yuen

amazingcss.super@gmail.com — Tue, 17 Sep 2019 08:15:00 GMT

This is a responsive table example created by Geoff Yuen. In this example, he uses display:block and data attributes to style the table and make it responsive. To see how it works, just click on the button Run Pen below:

How to create a responsive table

Step 1: Add Html

<h1>RWD List to Table</h1>
<table class="rwd-table">
  <tr>
    <th>Movie Title</th>
    <th>Genre</th>
    <th>Year</th>
    <th>Gross</th>
  </tr>
  <tr>
    <td data-th="Movie Title">Star Wars</td>
    <td data-th="Genre">Adventure, Sci-fi</td>
    <td data-th="Year">1977</td>
    <td data-th="Gross">$460,935,665</td>
  </tr>
  <tr>
    <td data-th="Movie Title">Howard The Duck</td>
    <td data-th="Genre">"Comedy"</td>
    <td data-th="Year">1986</td>
    <td data-th="Gross">$16,295,774</td>
  </tr>
  <tr>
    <td data-th="Movie Title">American Graffiti</td>
    <td data-th="Genre">Comedy, Drama</td>
    <td data-th="Year">1973</td>
    <td data-th="Gross">$115,000,000</td>
  </tr>
</table>

<p>
  &larr; Drag window (in editor or full page view) to see the effect. &rarr;
</p>

Step 2: Add CSS

@import 'compass/css3';

// More practical CSS...
// using mobile first method 
// (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)

$breakpoint-alpha: 480px; // adjust to your needs

.rwd-table {
  margin: 1em 0;
  min-width: 300px; // adjust to your needs

  tr {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }

  th {
    display: none; 
    // for accessibility, use a visually hidden method here instead!
    // Thanks, reddit!
  }

  td {
    display: block;

    &:first-child {
      padding-top: 0.5em;
    }
    &:last-child {
      padding-bottom: 0.5em;
    }

    &:before {
      content: attr(data-th) ': '; 
      // who knew you could do this? The internet, that's who.
      font-weight: bold;

      // optional stuff to make it look nicer
      width: 6.5em; 
      // magic number :( adjust according to your own content
      display: inline-block;
      // end options

      @media (min-width: $breakpoint-alpha) {
        display: none;
      }
    }
  }

  th,
  td {
    text-align: left;

    @media (min-width: $breakpoint-alpha) {
      display: table-cell;
      padding: 0.25em 0.5em;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }
    }
  }
}

// presentational styling
@import 'https://fonts.googleapis.com/css?family=Montserrat:300,400,700';

body {
  padding: 0 2em;
  font-family: Montserrat, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #444;
  background: #eee;
}

h1 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #34495e;
}

.rwd-table {
  background: #34495e;
  color: #fff;
  border-radius: 0.4em;
  overflow: hidden;
  tr {
    border-color: lighten(#34495e, 10%);
  }
  th,
  td {
    margin: 0.5em 1em;
    @media (min-width: $breakpoint-alpha) {
      padding: 1em !important;
    }
  }
  th,
  td:before {
    color: #dd5;
  }
}

// Responsive table method using display:block and data attributes
// Thanks to @leefroese for suggestion about data attributes

Flat responsive form using CSS3 & HTML5 by Rex Kirby

amazingcss.super@gmail.com — Mon, 16 Sep 2019 08:00:00 GMT

This is a flat responsive form using CSS3 & HTML5 for sending comment created by Rex Kirby. Just click on the button Run Pen to see how it works:

How to create a flat responsive form

Step 1: Add Html

<div id="form-main">
  <div id="form-div">
    <form class="form" id="form1">
      <p class="name">
        <input
          name="name"
          type="text"
          class="validate[required,custom[onlyLetter],length[0,100]] feedback-input"
          placeholder="Name"
          id="name"
        />
      </p>

      <p class="email">
        <input
          name="email"
          type="text"
          class="validate[required,custom[email]] feedback-input"
          id="email"
          placeholder="Email"
        />
      </p>

      <p class="text">
        <textarea
          name="text"
          class="validate[required,length[6,300]] feedback-input"
          id="comment"
          placeholder="Comment"
        ></textarea>
      </p>

      <div class="submit">
        <input type="submit" value="SEND" id="button-blue" />
        <div class="ease"></div>
      </div>
    </form>
  </div>
</div>

Step 2: Add CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400, 700);

html {
  background: url(http://thekitemap.com/images/feedback-img.jpg) no-repeat;
  background-size: cover;
  height: 100%;
}

#feedback-page {
  text-align: center;
}

#form-main {
  width: 100%;
  float: left;
  padding-top: 0px;
}

#form-div {
  background-color: rgba(72, 72, 72, 0.4);
  padding-left: 35px;
  padding-right: 35px;
  padding-top: 35px;
  padding-bottom: 50px;
  width: 450px;
  float: left;
  left: 50%;
  position: absolute;
  margin-top: 30px;
  margin-left: -260px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

.feedback-input {
  color: #3c3c3c;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  border-radius: 0;
  line-height: 22px;
  background-color: #fbfbfb;
  padding: 13px 13px 13px 54px;
  margin-bottom: 10px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid rgba(0, 0, 0, 0);
}

.feedback-input:focus {
  background: #fff;
  box-shadow: 0;
  border: 3px solid #3498db;
  color: #3498db;
  outline: none;
  padding: 13px 13px 13px 54px;
}

.focused {
  color: #30aed6;
  border: #30aed6 solid 3px;
}

/* Icons ---------------------------------- */
#name {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#name:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email {
  background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#comment {
  background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

textarea {
  width: 100%;
  height: 150px;
  line-height: 150%;
  resize: vertical;
}

input:hover,
textarea:hover,
input:focus,
textarea:focus {
  background-color: white;
}

#button-blue {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  float: left;
  width: 100%;
  border: #fbfbfb solid 4px;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  font-size: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin-top: -4px;
  font-weight: 700;
}

#button-blue:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #0493bd;
}

.submit:hover {
  color: #3498db;
}

.ease {
  width: 0px;
  height: 74px;
  background-color: #fbfbfb;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  transition: 0.3s ease;
}

.submit:hover .ease {
  width: 100%;
  background-color: white;
}

@media only screen and (max-width: 580px) {
  #form-div {
    left: 3%;
    margin-right: 3%;
    width: 88%;
    margin-left: 0;
    padding-left: 3%;
    padding-right: 3%;
  }
}

Text animation by Yoann

amazingcss.super@gmail.com — Sun, 15 Sep 2019 16:00:00 GMT

Static text is bored. But you can make it more lively with a text animation example below by Yoann. To see how it works, just click on the button Run Pen:

How to create a text animation

Step 1: Add Html

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />

<div class="content">
  <div class="content__container">
    <p class="content__container__text">
      Hello
    </p>

    <ul class="content__container__list">
      <li class="content__container__list__item">world !</li>
      <li class="content__container__list__item">bob !</li>
      <li class="content__container__list__item">users !</li>
      <li class="content__container__list__item">everybody !</li>
    </ul>
  </div>
</div>

Step 2: Add CSS

body {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #34495e;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 160px;
  overflow:hidden;
  
  font-family: 'Lato', sans-serif;
  font-size: 35px;
  line-height: 40px;
  color: #ecf0f1;
  
  &__container {
    font-weight: 600;
    overflow: hidden;
    height: 40px;
    padding: 0 40px;

    &:before {
      content: '[';
      left: 0;
    }

    &:after {
      content: ']';
      position: absolute;
      right: 0;
    }

    &:after, &:before {
      position: absolute;
      top: 0;
      
      color: #16a085;
      font-size: 42px;
      line-height: 40px;
      
      -webkit-animation-name: opacity;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      animation-name: opacity;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }

    &__text {
      display: inline;
      float: left;
      margin: 0;
    }

    &__list {
      margin-top: 0;
      padding-left: 110px;
      text-align: left;
      list-style: none;
      
      -webkit-animation-name: change;
      -webkit-animation-duration: 10s;
      -webkit-animation-iteration-count: infinite;
      animation-name: change;
      animation-duration: 10s;
      animation-iteration-count: infinite;

      &__item {
        line-height:40px;
        margin:0;
      }
    }
  }
}

@-webkit-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-webkit-keyframes change {
  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
  33.32%,45.98% {transform:translate3d(0,-50%,0);}
  49.98%,62.64% {transform:translate3d(0,-75%,0);}
  66.64%,79.3% {transform:translate3d(0,-50%,0);}
  83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@-o-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-o-keyframes change {
  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
  33.32%,45.98% {transform:translate3d(0,-50%,0);}
  49.98%,62.64% {transform:translate3d(0,-75%,0);}
  66.64%,79.3% {transform:translate3d(0,-50%,0);}
  83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@-moz-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-moz-keyframes change {
  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
  33.32%,45.98% {transform:translate3d(0,-50%,0);}
  49.98%,62.64% {transform:translate3d(0,-75%,0);}
  66.64%,79.3% {transform:translate3d(0,-50%,0);}
  83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

@keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@keyframes change {
  0%, 12.66%, 100% {transform:translate3d(0,0,0);}
  16.66%, 29.32% {transform:translate3d(0,-25%,0);}
  33.32%,45.98% {transform:translate3d(0,-50%,0);}
  49.98%,62.64% {transform:translate3d(0,-75%,0);}
  66.64%,79.3% {transform:translate3d(0,-50%,0);}
  83.3%,95.96% {transform:translate3d(0,-25%,0);}
}

// 6 is the number of animation.
// Here, there are 4 lines :

// 1 to 2
// 2 to 3
// 3 to 4
// 4 to 3
// 3 to 2
// 2 to 1

// 6x + 6y = 100 (100% duration)

// HERE : 
// y = 4 -> Animation between two lines
// x = 12.66 -> Time spent on a line

// You can define a value and calculate the other 
// if you want change speed or the number of lines

// Twitter @YoannHELIN

CSS scrollbar collection by Ghost Rider

amazingcss.super@gmail.com — Sun, 15 Sep 2019 15:45:00 GMT

Default scrollbar in a browser is normally not beautiful. But we customize to make it better and unique. Below is a CSS scrollbar collection created by Ghost Rider.

Just click on the button Run Pen below to see how it works:

How Ghost Rider make the CSS scrollbar collection

Step 1: Add Html

<div id="wrapper">
  <div class="scrollbar" id="style-default">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-1">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-2">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-3">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-4">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-5">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-6">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-7">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-8">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-9">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-10">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-11">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-13">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-14">
    <div class="force-overflow"></div>
  </div>

  <div class="scrollbar" id="style-15">
    <div class="force-overflow"></div>
  </div>
</div>

Step 2: Add CSS

header {
  font-family: 'Lobster', cursive;
  text-align: center;
  font-size: 25px;
}

#info {
  font-size: 18px;
  color: #555;
  text-align: center;
  margin-bottom: 25px;
}

a {
  color: #074e8c;
}

.scrollbar {
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #f5f5f5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow {
  min-height: 450px;
}

#wrapper {
  text-align: center;
  width: 500px;
  margin: auto;
}

/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

#style-1::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

#style-1::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

#style-2::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

#style-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #d62929;
}

/*
 *  STYLE 3
 */

#style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#style-3::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}

#style-3::-webkit-scrollbar-thumb {
  background-color: #000000;
}

/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#style-4::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-4::-webkit-scrollbar-thumb {
  background-color: #000000;
  border: 2px solid #555555;
}

/*
 *  STYLE 5
 */

#style-5::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#style-5::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-5::-webkit-scrollbar-thumb {
  background-color: #0ae;

  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    color-stop(0.5, rgba(255, 255, 255, 0.2)),
    color-stop(0.5, transparent),
    to(transparent)
  );
}

/*
 *  STYLE 6
 */

#style-6::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#style-6::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-6::-webkit-scrollbar-thumb {
  background-color: #f90;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

/*
 *  STYLE 7
 */

#style-7::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}

#style-7::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-7::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.44, rgb(122, 153, 217)),
    color-stop(0.72, rgb(73, 125, 189)),
    color-stop(0.86, rgb(28, 58, 148))
  );
}

/*
 *  STYLE 8
 */

#style-8::-webkit-scrollbar-track {
  border: 1px solid black;
  background-color: #f5f5f5;
}

#style-8::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-8::-webkit-scrollbar-thumb {
  background-color: #000000;
}

/*
 *  STYLE 9
 */

#style-9::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#style-9::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-9::-webkit-scrollbar-thumb {
  background-color: #f90;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

/*
 *  STYLE 10
 */

#style-10::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}

#style-10::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-10::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

/*
 *  STYLE 11
 */

#style-11::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}

#style-11::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-11::-webkit-scrollbar-thumb {
  background-color: #3366ff;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.5) 75%,
    transparent 75%,
    transparent
  );
}

/*
 *  STYLE 12
 */

#style-12::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  background-color: #444444;
}

#style-12::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

#style-12::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #d62929;
  background-image: -webkit-linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.4) 50%,
    transparent,
    transparent
  );
}

/*
 *  STYLE 13
 */

#style-13::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  background-color: #cccccc;
}

#style-13::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

#style-13::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #d62929;
  background-image: -webkit-linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.4) 50%,
    transparent,
    transparent
  );
}

/*
 *  STYLE 14
 */

#style-14::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  background-color: #cccccc;
}

#style-14::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-14::-webkit-scrollbar-thumb {
  background-color: #fff;
  background-image: -webkit-linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 25%,
    transparent 100%,
    rgba(0, 0, 0, 1) 75%,
    transparent
  );
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

#style-15::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-15::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #fff;
  background-image: -webkit-gradient(
    linear,
    40% 0%,
    75% 84%,
    from(#4d9c41),
    to(#19911d),
    color-stop(0.6, #54de5d)
  );
}

/*
 *  STYLE 16
 */

#style-16::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

#style-16::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#style-16::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #fff;
  background-image: -webkit-linear-gradient(
    top,
    #e4f5fc 0%,
    #bfe8f9 50%,
    #9fd8ef 51%,
    #2ab0ed 100%
  );
}

CSS3 radial progress bar by Geedmo

amazingcss.super@gmail.com — Sun, 15 Sep 2019 15:30:00 GMT

CSS3 radial progress bar is useful to create a radial bar chart. Below is a simple demo for it by Geedmo. In this example, Geedmo is using SASS to make coding easier and faster. But you can actually use CSS3 only to make a radial progress bar.

To see how it works, just click on the button Run Pen below:

How to create a CSS3 radial progress bar

Step 1: Add Html

<div class="wrap">
  <!-- 
    Use class "progress-radial" to represent for a radio progress bar.
    And use class "progress-xx" to represent for a percentage.
    With "xx" is from 0 to 100.
  -->
  <div class="progress-radial progress-25">
    <div class="overlay">25%</div>
  </div>

  <div class="progress-radial progress-50">
    <div class="overlay">50%</div>
  </div>

  <div class="progress-radial progress-75">
    <div class="overlay">75%</div>
  </div>

  <div class="progress-radial progress-90">
    <div class="overlay">90%</div>
  </div>
</div>
<!--
  @title: CSS3 Background Radial Progress Bars
  @author: @geedmo 
  @url: http://geedmo.com
-->

Step 2: Add CSS

SASS version:

@import compass

// Colors
$barColor: tomato
$overlayColor: #fffde8
$backColor: #2f3439

@import url(https://fonts.googleapis.com/css?family=Noto+Sans)

body
  padding: 30px 0
  background-color: $backColor
  font-family: 'Noto Sans', sans-serif

.wrap
  width: 600px
  margin: 0 auto

/* -------------------------------------
 * Bar container
 * ------------------------------------- */
.progress-radial
  float: left
  margin-right: 30px
  position: relative
  width: 100px
  height: 100px
  border-radius: 50%
  border: 2px solid $backColor // remove gradient color
  background-color: $barColor // default 100%

/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */  
.progress-radial .overlay
  position: absolute
  width: 60px
  height: 60px
  background-color: $overlayColor
  border-radius: 50%
  margin-left: 20px
  margin-top: 20px
  text-align: center
  line-height: 60px
  font-size: 16px
  
/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */

$step: 5 // step of % for created classes

$loops: round(100 / $step)
$increment: 360 / $loops
$half: round($loops / 2)
@for $i from 0 through $loops
  .progress-#{$i*$step}
    @if $i < $half
      $nextdeg: 90deg + ( $increment * $i )
      background-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barColor 50%, $backColor 50%, $backColor)
    @else
      $nextdeg: -90deg + ( $increment * ( $i - $half ) )
      background-image: linear-gradient($nextdeg, $barColor 50%, transparent 50%, transparent), linear-gradient(270deg, $barColor 50%, $backColor 50%, $backColor)

CSS3 version:

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body {
  padding: 30px 0;
  background-color: #2f3439;
  font-family: 'Noto Sans', sans-serif;
}

.wrap {
  width: 600px;
  margin: 0 auto;
}

/* -------------------------------------
 * Bar container
 * ------------------------------------- */
.progress-radial {
  float: left;
  margin-right: 30px;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #2f3439;
  background-color: tomato;
}

/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */
.progress-radial .overlay {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: #fffde8;
  border-radius: 50%;
  margin-left: 20px;
  margin-top: 20px;
  text-align: center;
  line-height: 60px;
  font-size: 16px;
}

/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */
.progress-0 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(90deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-5 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(108deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-10 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(126deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-15 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(144deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-20 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(162deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-25 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(180deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-30 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(198deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-35 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(216deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-40 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(234deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-45 {
  background-image: linear-gradient(
      90deg,
      #2f3439 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(252deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-50 {
  background-image: linear-gradient(
      -90deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-55 {
  background-image: linear-gradient(
      -72deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-60 {
  background-image: linear-gradient(
      -54deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-65 {
  background-image: linear-gradient(
      -36deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-70 {
  background-image: linear-gradient(
      -18deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-75 {
  background-image: linear-gradient(
      0deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-80 {
  background-image: linear-gradient(
      18deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-85 {
  background-image: linear-gradient(
      36deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-90 {
  background-image: linear-gradient(
      54deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-95 {
  background-image: linear-gradient(
      72deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

.progress-100 {
  background-image: linear-gradient(
      90deg,
      #ff6347 50%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0)
    ), linear-gradient(270deg, #ff6347 50%, #2f3439 50%, #2f3439);
}

CSS simple tooltip by Chris Bracco

amazingcss.super@gmail.com — Sun, 15 Sep 2019 15:00:00 GMT

Below is a CSS simple tooltip with a link or a button created by Chris Bracco. To see how it works, just click on the button Run Pen:

Step 1: Add Html

<h1>CSS Simple Tooltip</h1>
<div class="demo">
  <p>
    <a href="#" data-tooltip="I’m the tooltip text.">
      I’m a link with a tooltip.
    </a>
  </p>
  <p>
    <button data-tooltip="I’m the tooltip text.">
      I’m a button with a tooltip
    </button>
  </p>
</div>

Step 2: Add CSS

/**
 * Demo styles
 * Not needed for tooltips to work
 */

/* `border-box`... ALL THE THINGS! */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 64px auto;
  text-align: center;
  font-size: 100%;
  max-width: 640px;
  width: 94%;
}

a:hover {
  text-decoration: none;
}

header,
.demo,
.demo p {
  margin: 4em 0;
  text-align: center;
}

/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: ' ';
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

Pure CSS3 slide down toggle demo by Surjith

amazingcss.super@gmail.com — Sun, 15 Sep 2019 12:00:00 GMT

A pure CSS3 slide down toggle demo created by Surjith. Just click on the button Run Pen below to see how it works:

How to create a pure CSS3 slide down toggle

Step 1: Add Html

<!-- Use a input to handle a click event -->
<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"></label>

<!-- Container which is opened by default -->
<div class="container">
  <h1>Pure CSS3 Slide Down Toggle Demo</h1>
  <h2>Click the Open button to see hidden mesage.</h2>
</div>

<!-- Message which is opened after user clicks on Open button -->
<div class="message">
  <h1>hello, I'm a hidden message. You found it.</h1>
  <h2>Now Click the Heart button in the bottom to support CSS3</h2>
</div>

Step 2: Add CSS

/* Default css to make the demo more pretty */
* {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Sans-serif;
  word-spacing: -2px;
}

h1 {
  font-size: 40px;
  font-weight: bold;
  color: #191919;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight: normal;
  font-size: 20px;
  color: #888;
  padding: 5px 0;
}

/* Style for the message. First, set the top value is -250px to hide it. */
.message {
  background: #181818;
  color: #fff;
  position: absolute;
  top: -250px;
  left: 0;
  width: 100%;
  height: 250px;
  padding: 20px;
  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  overflow: hidden;
  box-sizing: border-box;
}

.message h1 {
  color: #fff;
}

/* Style for toggle button */
#toggle {
  position: absolute;
  appearance: none;
  cursor: pointer;
  left: -100%;
  top: -100%;
}

#toggle + label {
  position: absolute;
  cursor: pointer;
  padding: 10px;
  background: #26ae90;
  width: 100px;
  border-radius: 3px;
  padding: 8px 10px;
  color: #fff;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  margin: 20px 50px;
  transition: all 500ms ease;
}
#toggle + label:after {
  content: 'Open';
}

.container {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding: 5em 3em;
}

/* 
Style when the input is checked.
Just set new top value for the message as 0 to show it on top.
*/
#toggle:checked ~ .message {
  top: 0;
}

/* Set margin-top for the container to pull it down  */
#toggle:checked ~ .container {
  margin-top: 250px;
}

#toggle:checked + label {
  background: #dd6149;
}

#toggle:checked + label:after {
  content: 'Close';
}

/*
Pure CSS Slide Down Toggle. No JS. Seriously
Inspired by Layervault
*/

CSS3 loading animations by Manoz

amazingcss.super@gmail.com — Sat, 14 Sep 2019 12:00:00 GMT

A collection of some CSS3 loading animations with html and pure css3 created by Manoz. Just click on the button Run Pen below to see how it works:

How to create CSS3 loading animations

Step 1: Add Html

<body>
  <div class="content">
    <h3>CSS3 Loading animations</h3>
    <div class="load-wrapp">
      <div class="load-1">
        <p>Loading 1</p>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-2">
        <p>Loading 2</p>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-3">
        <p>Loading 3</p>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>
    <div class="load-wrapp">
      <!-- 
        Loading 4 don't work on firefox because of the border-radius 
        and the "dashed" style. 
      -->
      <div class="load-4">
        <p>Loading 4</p>
        <div class="ring-1"></div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-5">
        <p>Loading 5</p>
        <div class="ring-2">
          <div class="ball-holder">
            <div class="ball"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-6">
        <p>Loading 6</p>
        <div class="letter-holder">
          <div class="l-1 letter">L</div>
          <div class="l-2 letter">o</div>
          <div class="l-3 letter">a</div>
          <div class="l-4 letter">d</div>
          <div class="l-5 letter">i</div>
          <div class="l-6 letter">n</div>
          <div class="l-7 letter">g</div>
          <div class="l-8 letter">.</div>
          <div class="l-9 letter">.</div>
          <div class="l-10 letter">.</div>
        </div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-7">
        <p>Loading 7</p>
        <div class="square-holder">
          <div class="square"></div>
        </div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-8">
        <p>Loading 8</p>
        <div class="line"></div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-9">
        <p>Loading 9</p>
        <div class="spinner">
          <div class="bubble-1"></div>
          <div class="bubble-2"></div>
        </div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-10">
        <p>Loading 10</p>
        <div class="bar"></div>
      </div>
    </div>
  </div>
  <div class="clear"></div>
</body>

Step 2: Add CSS

/* -----------------------------------------
  =Default css to make the demo more pretty
-------------------------------------------- */

body {
  margin: 0 auto;
  padding: 20px;
  max-width: 1200px;
  overflow-y: scroll;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #777;
  background-color: #f7f7f7;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.content {
  padding: 15px;
  overflow: hidden;
  background-color: #e7e7e7;
  background-color: rgba(0, 0, 0, 0.06);
}

h1 {
  padding-bottom: 15px;
  border-bottom: 1px solid #d8d8d8;
  font-weight: 600;
}

h1 span {
  font-family: monospace, serif;
}

h3 {
  padding-bottom: 20px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9);
}

p {
  margin: 0;
  padding: 10px 0;
  color: #777;
}

.clear {
  clear: both;
}

/* -----------------------------------------
  =CSS3 Loading animations
-------------------------------------------- */

/* =Elements style
---------------------- */
.load-wrapp {
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px 10px 0;
  padding: 20px 20px 20px;
  border-radius: 5px;
  text-align: center;
  background-color: #d8d8d8;
}

.load-wrapp p {
  padding: 0 0 20px;
}
.load-wrapp:last-child {
  margin-right: 0;
}

.line {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: #4b9cdb;
}

.ring-1 {
  width: 10px;
  height: 10px;
  margin: 0 auto;
  padding: 10px;
  border: 7px dashed #4b9cdb;
  border-radius: 100%;
}

.ring-2 {
  position: relative;
  width: 45px;
  height: 45px;
  margin: 0 auto;
  border: 4px solid #4b9cdb;
  border-radius: 100%;
}

.ball-holder {
  position: absolute;
  width: 12px;
  height: 45px;
  left: 17px;
  top: 0px;
}

.ball {
  position: absolute;
  top: -11px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: #4282b3;
}

.letter-holder {
  padding: 16px;
}

.letter {
  float: left;
  font-size: 14px;
  color: #777;
}

.square {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background-color: #4b9cdb;
}

.spinner {
  position: relative;
  width: 45px;
  height: 45px;
  margin: 0 auto;
}

.bubble-1,
.bubble-2 {
  position: absolute;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: #4b9cdb;
}

.bubble-2 {
  top: auto;
  bottom: 0;
}

.bar {
  float: left;
  width: 15px;
  height: 6px;
  border-radius: 2px;
  background-color: #4b9cdb;
}

/* =Animate the stuff
------------------------ */
.load-1 .line:nth-last-child(1) {
  animation: loadingA 1.5s 1s infinite;
}
.load-1 .line:nth-last-child(2) {
  animation: loadingA 1.5s 0.5s infinite;
}
.load-1 .line:nth-last-child(3) {
  animation: loadingA 1.5s 0s infinite;
}

.load-2 .line:nth-last-child(1) {
  animation: loadingB 1.5s 1s infinite;
}
.load-2 .line:nth-last-child(2) {
  animation: loadingB 1.5s 0.5s infinite;
}
.load-2 .line:nth-last-child(3) {
  animation: loadingB 1.5s 0s infinite;
}

.load-3 .line:nth-last-child(1) {
  animation: loadingC 0.6s 0.1s linear infinite;
}
.load-3 .line:nth-last-child(2) {
  animation: loadingC 0.6s 0.2s linear infinite;
}
.load-3 .line:nth-last-child(3) {
  animation: loadingC 0.6s 0.3s linear infinite;
}

.load-4 .ring-1 {
  animation: loadingD 1.5s 0.3s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
}

.load-5 .ball-holder {
  animation: loadingE 1.3s linear infinite;
}

.load-6 .letter {
  animation-name: loadingF;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-direction: linear;
}

.l-1 {
  animation-delay: 0.48s;
}
.l-2 {
  animation-delay: 0.6s;
}
.l-3 {
  animation-delay: 0.72s;
}
.l-4 {
  animation-delay: 0.84s;
}
.l-5 {
  animation-delay: 0.96s;
}
.l-6 {
  animation-delay: 1.08s;
}
.l-7 {
  animation-delay: 1.2s;
}
.l-8 {
  animation-delay: 1.32s;
}
.l-9 {
  animation-delay: 1.44s;
}
.l-10 {
  animation-delay: 1.56s;
}

.load-7 .square {
  animation: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
}

.load-8 .line {
  animation: loadingH 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
}

.load-9 .spinner {
  animation: loadingI 2s linear infinite;
}
.load-9 .bubble-1,
.load-9 .bubble-2 {
  animation: bounce 2s ease-in-out infinite;
}
.load-9 .bubble-2 {
  animation-delay: -1s;
}

.load-10 .bar {
  animation: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
}

@keyframes loadingA {
  0 {
    height: 15px;
  }
  50% {
    height: 35px;
  }
  100% {
    height: 15px;
  }
}

@keyframes loadingB {
  0 {
    width: 15px;
  }
  50% {
    width: 35px;
  }
  100% {
    width: 15px;
  }
}

@keyframes loadingC {
  0 {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes loadingD {
  0 {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loadingE {
  0 {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loadingF {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes loadingG {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(70px, 0) rotate(360deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes loadingH {
  0% {
    width: 15px;
  }
  50% {
    width: 35px;
    padding: 4px;
  }
  100% {
    width: 15px;
  }
}

@keyframes loadingI {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

@keyframes loadingJ {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(80px, 0);
    background-color: #f5634a;
    width: 25px;
  }
}

/* =Credits
--------------------------

* Loading 9 by http://demo.gavick.com/wordpress/game/

Some other nice animations :
  - https://codepen.io/adonisk/pen/vghsm
  - https://codepen.io/adonisk/pen/vghsm
  - https://codepen.io/m412c0/pen/Lhzer
*/

Pure CSS Hamburger fold-out menu by Erik Terwan

amazingcss.super@gmail.com — Wed, 11 Sep 2019 18:00:00 GMT

A simple pure CSS Hamburger fold-out menu with plain Html markup and pure CSS created by Erik Terwan. Just click on the button Run Pen below to see how it works:

Step 1: Add Html

<!--    Made by Erik Terwan    -->
<!--   24th of November 2015   -->
<!--        MIT License        -->
<nav role="navigation">
  <div id="menuToggle">
    <!--
    A fake / hidden checkbox is used as click reciever,
    so you can use the :checked selector on it.
    -->
    <input type="checkbox" />

    <!--
    Some spans to act as a hamburger.
    
    They are acting like a real hamburger,
    not that McDonalds stuff.
    -->
    <span></span>
    <span></span>
    <span></span>

    <!--
    Too bad the menu has to be inside of the button
    but hey, it's pure CSS magic.
    -->
    <ul id="menu">
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
      <a href="#"><li>Info</li></a>
      <a href="#"><li>Contact</li></a>
      <a href="https://erikterwan.com/" target="_blank"
        ><li>Show me more</li></a
      >
    </ul>
  </div>
</nav>

Step 2: Add CSS

/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */
body {
  margin: 0;
  padding: 0;
  /* make it look decent enough */
  background: #232323;
  color: #cdcdcd;
  font-family: 'Avenir Next', 'Avenir', sans-serif;
}

a {
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}

a:hover {
  color: tomato;
}

#menuToggle {
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s
      cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul {
  transform: none;
}

A pure CSS collapsible widget from Alligator.io

amazingcss.super@gmail.com — Wed, 11 Sep 2019 06:00:00 GMT

A pure CSS collapsible widget from Alligator.io. This collapsible widget is a popular way to create a section of content that can contract and expand. To see how it works, just click on the button Run Pen below:

Step 1: Add Html

<!-- Wrapper for a collapsible widget -->
<div class="wrap-collapsible">
  <!-- 
    Use a checkbox input to handle a click event.

    The checkbox will be invisible 
    and its label will be used instead to check or uncheck it.

    We'll use the CSS :checked pseudo-selector to style things differently 
    when the hidden checkbox is checked.
  -->
  <input id="collapsible" class="toggle" type="checkbox" />

  <!-- 
    Note that each label should be associated with the correct checkbox.
    So each checkbox element needs a unique id and 
    each label's for attribute should point to the corresponding checkbox's id.
  -->
  <label for="collapsible" class="lbl-toggle">More Info</label>

  <!-- Detail content for the collapsible widget -->
  <div class="collapsible-content">
    <div class="content-inner">
      <p>
        Bacon ipsum dolor amet pork belly capicola ground round brisket. Shank
        pork belly cupim fatback. Flank porchetta chicken spare ribs. Ham
        prosciutto pork belly turkey beef picanha strip steak swine alcatra.
      </p>
    </div>
  </div>
</div>

Step 2: Add CSS

.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

/* 
* First we set the checkbox element to display: none. 
* Because it will be invisible.
*/
input[type='checkbox'] {
  display: none;
}

/* Style the label as a button */
.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  color: #a77b0e;
  background: #fae042;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.25s ease-out;
}

/* Style the label when user hovers it */
.lbl-toggle:hover {
  color: #7c5a0b;
}

/* Implement a right angle icon */
.lbl-toggle::before {
  content: ' ';
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: 0.7rem;
  transform: translateY(-2px);
  transition: transform 0.2s ease-out;
}

/* Rotate the right angle icon when the checkbox input is checked */
.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

/* First, set max-height for the collapsible content is 0px to hide it */
.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.25s ease-in-out;
}

/* When the input is checked, set the max-height is 350px to show it */
.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 350px;
}

/* Style the checkbox input when it is checked */
.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
  background: rgba(250, 224, 66, 0.2);
  border-bottom: 1px solid rgba(250, 224, 66, 0.45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: 0.5rem 1rem;
}

Simple pure CSS dropdown menu by Phil Hoyt

amazingcss.super@gmail.com — Tue, 10 Sep 2019 06:00:00 GMT

A simple pure CSS dropdown menu with plain Html markup and pure CSS created by Phil Hoyt. Just click on the button Run Pen below to see how it works:

Step 1: Add Html

<h1>Simple Pure CSS Drop Down Menu</h1>

<!-- Use nav tag as a wrapper for the dropdown menu -->
<nav id="primary_nav_wrap">
  <!-- Use ul tag as a list of menu items -->
  <ul>
    <!-- 
	  + Use li tag as a menu item follow conditions:
	  	- If a menu item doesn't have submenu items, 
		  just using anchor tag with a "href" and a text content.
	  	- Otherwise, if a menu item has submenu items, 
		  using ul tag again to make nested lists.
	  
	  + Next, if a menu item is active, 
	  	set class with value "current-menu-item" for it.
	-->
    <li class="current-menu-item"><a href="#">Home</a></li>
    <li>
      <a href="#">Menu 1</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
        <li>
          <a href="#">Sub Menu 4</a>
          <ul>
            <li>
              <a href="#">Deep Menu 1</a>
              <ul>
                <li><a href="#">Sub Deep 1</a></li>
                <li><a href="#">Sub Deep 2</a></li>
                <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
              </ul>
            </li>
            <li><a href="#">Deep Menu 2</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 2</a>
      <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
        <li><a href="#">Sub Menu 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 3</a>
      <ul>
        <li class="dir"><a href="#">Sub Menu 1</a></li>
        <li class="dir">
          <a href="#"
            >Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE
            NOT?</a
          >
          <ul>
            <li><a href="#">Category 1</a></li>
            <li><a href="#">Category 2</a></li>
            <li><a href="#">Category 3</a></li>
            <li><a href="#">Category 4</a></li>
            <li><a href="#">Category 5</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Menu 3</a></li>
        <li><a href="#">Sub Menu 4</a></li>
        <li><a href="#">Sub Menu 5</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

Step 2: Add CSS

#primary_nav_wrap {
  margin-top: 15px;
}

#primary_nav_wrap ul {
  list-style: none; /* default value of list-style is disc */
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

#primary_nav_wrap ul a {
  display: block; /* the default value is inline-block */
  color: #333;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
  padding: 0 15px;
  font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

#primary_nav_wrap ul li.current-menu-item {
  background: #ddd; /* change background color of the active menu item */
}

#primary_nav_wrap ul li:hover {
  background: #f6f6f6; /* Change color of a menu item when user hovers it */
}

#primary_nav_wrap ul ul {
  display: none; /* Normally, hide all nested list */
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 200px;
}

#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 10px 15px;
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%;
}

#primary_nav_wrap ul li:hover > ul {
  display: block; /* when user hovers a menu item, then show its nested list */
}

Amazing CSS

Awesome textured text with html and css

How to create an awesome textured text

Step 1: Add Html

Step 2: Add CSS

Animated share button with html and css

How to create an animated share button

Step 1: Add Html

Step 2: Add CSS

Button with amazing hover effect

How to create a button with amazing hover effect

Step 1: Add Html

Step 2: Add CSS

Amazing css with profile card

How to create an amazing css with profile card

Step 1: Add Html

Step 2: Add CSS

Cool hover effect on menu

How to create a cool hover effect on menu

Step 1: Add Html

Step 2: Add CSS

Slideshow with navigation buttons by CSS

How to create a responsive navigation bar with css

Step 1: Add Html

Step 2: Add CSS

Amazing CSS with ripple animation

How to create a responsive navigation bar with css

Step 1: Add Html

Step 2: Add CSS

Responsive navigation bar with css

How to create a responsive navigation bar with css

Step 1: Add Html

Step 2: Add CSS

Amazing profile card using html and css

How to create an amazing profile card using html and css

Step 1: Add Html

Step 2: Add CSS

Amazing CSS with hover effects on icon

How to create an amazing CSS with hover effects on icon

Step 1: Add Html

Step 2: Add CSS

Customize scrollbar with css only

How to customize scrollbar with css only

Step 1: Add Html

Step 2: Add CSS

Responsive contact info with dark theme

How to create a responsive contact info with dark theme

Step 1: Add Html

Step 2: Add CSS

Awesome contact info with flip animation

How to create a contact info with flip animation

Step 1: Add Html

Step 2: Add CSS

Amazing CSS with hover effect on text

How to create a hover effect on text

Step 1: Add Html

Step 2: Add CSS

Create a simple responsive about section

How to create a simple responsive about section

Step 1: Add Html

Step 2: Add CSS

Buttons with 3D effects on hover

How to create buttons with 3D effects on hover

Step 1: Add Html

Step 2: Add CSS

Amazing css with hover effect on image

How to create an amazing css with hover effect on image

Step 1: Add Html

Step 2: Add CSS

Hidden text animation with html and css

How to create a hidden text animation

Step 1: Add Html

Step 2: Add CSS

Glitch text effect like TikTok

How to create a glitch text effect like TikTok

Step 1: Add Html

Step 2: Add CSS

New loading animation idea

How to create a new loading animation idea

Step 1: Add Html