Code Asteroid IDE : Stylish animation button design with basic HTML and CSS.

- Home
- Services
- Our Products
  ›
  - Back
    ‹
  - Palette RGB
  - Code Asteroid
- Skill Test
- Events
- Videos
- News
  ›
  - Back
    ‹
  - Jobs & Hiring
  - Tech News
  - Startups
- Aptitude Test
- Technology
  ›
  - Back
    ‹
  - Developer Corner
  - Tutorials

Stylish animation button design with basic HTML and CSS. Views: 619 By: Ankur Hack

Contribute Run

HTML

<div class="info-con">
  <h3>
    Hover Over Button For Animation Effect!
  </h3>
</div>

<div class="outer-wrapper-con">
  <div class="n-contribute-btn-publish">
    <div class="four-n-publish-btn">
        <a href="#">
            <div class="n-contribute-main">
                <div class="btn-one-layer">
                    <div class="btn-second-layer">
                        <span>
                            <span class="n-inner-btn-text">Download Resume</span>
                        </span>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
</div>

CSS

.info-con{
  text-align:center;
  margin-top:40px;
}

.outer-wrapper-con{
  text-align:center;
  margin-top:50px;
}
.n-contribute-btn-publish{
  width:250px;
  margin:auto;
}
.four-n-publish-btn a{
  text-decoration:none;
}
.four-n-publish-btn {
    position: relative;
    margin: 5px;
}
.n-contribute-main {
    border: 3px solid transparent;
}
.btn-one-layer:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 3px;
    background: #ff3c43;
    transition: all 0.5s;
}
.btn-second-layer {
    text-align: center;
    padding: 10px 0px;
}
.btn-second-layer:before {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: 100%;
    width: 3px;
    background: #ff3c43;
    transition: all 0.5s;
}
.n-inner-btn-text {
    font-weight: bold;
    color: #4c4c4c;
}
.btn-second-layer:after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 3px;
    background: #ff3c43;
    transition: all 0.5s;
}
.btn-one-layer:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 3px;
    background: #ff3c43;
    transition: all 0.5s;
}
.n-contribute-main:hover {
    background-color: #f3f3f3;
    border: 3px solid lightgray;
}
.n-contribute-main:hover .btn-one-layer:before {
    height: 40px;
}
.n-contribute-main:hover .btn-second-layer:before {
    height: 40px;
}
.n-contribute-main:hover .btn-second-layer:after {
    width: 50%;
}
.n-contribute-main:hover .btn-one-layer:after {
    width: 50%;
}

Site

Training

Save Code

No code found to submit, Please add code in editors.

Thank you for your contribution. Our experts are soon review your canvas and update you.