Skip to main content

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

  • Interesting, but doesn’t appear to work in Chrome (v 40).

    • Prakash Nakrani

      i think use of vendor prefixes will solve your problem. Did you try that Simon?

  • Hi there everyone, it’s my first pay a quick visit at this website, and post is actually fruitful in support of me, keep up posting such content.

  • Hello colleagues, its impressive paragraph concerning tutoringand entirely
    defined, keep it up all the time.

  • deduka

    How to get this work in IE9 ?
    Do I need to add something like -ms-transform… ?
    Thanks.

  • Excellent way of explaining, and good piece of writing to obtain information about my presentation subject, which
    i am going to present in institution of higher education.

  • ӏ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