Fun with CSS : CSS Rotating Dashed Border

How a cartoon snake will look, if it rotate itself in a circular mode without stopping? Well if you can imagine that’s great but if you can’t then just try this little snippet to get CSS rotating dashed border effect.

This snippet will add such kind of an illusion to the ghost button. So here is my pre-thought to get through this tutorial.

Pre Thought:

1) First of all, we have to make four division since we want a box shape for the button, and this is why because a box has only four side in 2D-world.

2) We will style our divisions with dashed border and will apply animation via a function of @keyframes for infinite rotating and a time limit.

3) Since it is a four division combination we have to rotate each and every division in a specific angle via transform property and will make use of @keyframes to give our rotation a direction.

Let’s get in


<div class="rotate">
  <div class="line"><i></i></div>
  <div class="line"><i></i></div>
  <div class="line"><i></i></div>
  <div class="line"><i></i></div>
  <div class="line">Signature</div>
</div>


body{
  margin-top:25px;
  background:url('http://designreflect.com/wp-content/uploads/2012/09/wooden-textures/Vintage-Grunge-Wood-Background.jpg');
}
.rotate {
  position: relative;
  margin: 40px auto;
  width: 210px;
  height: 90px;
  overflow: hidden;
  color: gold;
}
.rotate:hover {
  cursor: pointer;
  color: silver;
  transition: all 0.5s;
}
.rotate .line {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}
.rotate .line:nth-of-type(1) {
  transform: rotate(0deg);
}
.rotate .line:nth-of-type(2) {
  transform: rotate(90deg);
  margin-left:60px;
}
.rotate .line:nth-of-type(3) {
  transform: rotate(180deg);
}
.rotate .line:nth-of-type(4) {
  transform: rotate(270deg);
  margin-left:-60px;
}
.rotate .line i {
  left: 0;
  top: 0;
  width: 200%;
  display: block;
  position: absolute;
  border-bottom: 5px dashed;
  animation: move 3.5s infinite linear;
}
.rotate .text {
  width:210px;
  line-height: 80px;
  display: block;
  text-align: center;
  position: absolute;
  font-size: 40px; 
}
@keyframes move {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

Chekout the demo

7 Replies to “Fun with CSS : CSS Rotating Dashed Border”

Leave a Reply

Your email address will not be published. Required fields are marked *