Search code examples
htmlcssbuttonplayback

CSS Static Play Button


I'm trying to make a play button. I've run in to some trouble trying to get the play triangle to center in the circle. I've been trying to figure this out with no avail so I thought I'd ask you guys and gals!

If you have any other suggestions on how to do this I would love to know!

Thanks guys!

HTML:

    <a href="#">
      Learn more
      <br>
      <i class="fa fa-angle-down"></i>
    </a>

CSS:

#play-btn{
  height: 100px;
  width: 100px;
  margin: 0 auto;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #FFF;
  border-radius: 50%;
  opacity: .7;
}

#play-btn:hover{
  opacity: 1;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.fa-play{
  position: relative;
  top: 50%;
  color: #FFF;
  opacity: .7;
  font-size: 50px;
  transform: translateY(-50%);
}

.fa-play:hover{
  color: #FFF;
  opacity: 1;
}

http://codepen.io/anon/pen/grpzmr


Solution

  • Actually You just need to make minor modification with your CSS.

    Just add the below CSS for the class #play-btn, and your problem will be resolved.

    text-align:center;
    padding-left: 10px;
    

    Or Check it out below updated code :

    HTML :

    <a href="#">
          Learn more
          <br>
          <i class="fa fa-angle-down"></i>
        </a>
    

    CSS :

    #play-btn{
      height: 100px;
      width: 100px;
      margin: 0 auto;
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      border: 3px solid #FFF;
      border-radius: 50%;
      opacity: .7;
      text-align:center;
      padding-left: 10px;
    }
    
    #play-btn:hover{
      opacity: 1;
      -webkit-transition: all 500ms ease;
      -moz-transition: all 500ms ease;
      -ms-transition: all 500ms ease;
      -o-transition: all 500ms ease;
      transition: all 500ms ease;
    }
    
    .fa-play{
      position: relative;
      top: 50%;
      color: #FFF;
      opacity: .7;
      font-size: 50px;
      transform: translateY(-50%);
    }
    
    .fa-play:hover{
      color: #FFF;
      opacity: 1;
    }
    

    Just copy and paste and check it out i hope this will help you.