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 thoughts on “Fun with CSS : CSS Rotating Dashed Border

  1. ӏt’s actᥙally a gteat annd սseful piece off іnformation. Ⅰ am satksfied thazt yoou
    shafed tһiѕ useful іnformation witth սs. Pⅼease ҝeep ᥙs սp to ԁate
    like thіs. Thank you fοr sharing.

    Αlso visit mmy web-site: agencasino.me

Leave a Reply

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