animated button

CircleFaust · 12 Apr 2017 at 23:33

hi, i'm trying to add an animated button to my website

i'm just learning so finding it difficult
the button was 'button 2' from this site
https://codepen.io/davidicus/pen/emgQKJ

is it just this html i would need. does that go in the header section?

HTML:

<section class="buttons">
  <div class="container">
             <svg>
        <rect x="0" y="0" fill="none" width="100%" height="100%"/>
      </svg>
 
    </a>
 
   
    <a href="https://twitter.com/Dave_Conner" class="btn btn-2">Hover</a>
    <!--End of Button 2 -->
   
 
  </div>
 
</section>

could anyone post what CSS i need from all that?
i'm using visual code for this
thanks

SimonCHere · 13 Apr 2017 at 13:22

If you are just doing the hover 2 button you don't need the <SVG> bit at the top. Or the </a> that was part of the button 1 link from the page.
so your HTML section will just be:

HTML:

<body>
<section class="buttons">
  <div class="container">
    <h1>Button Hover Effects</h1>
   
    <a href="https://twitter.com/Dave_Conner" class="btn btn-2">Hover2</a>
   
  </div>
 
</section>
</body>

As for the CSS you will need almost the whole lot. you can take out the bits marked .btn-* other than the one you want. this is about the minimum you can get away with:

HTML:

<style>
* {
  box-sizing: inherit;
  transition-property: all;
  transition-duration: .6s;
  transition-timing-function: ease;
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.buttons {
  display: table;
  height: 100%;
  width: 100%;
}

.container {
  display: table-cell;
  padding: 1em;
  text-align: center;
  vertical-align: middle;
}

.btn {
  color: #000;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 auto 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
}

.btn:hover {
  text-decoration: none;
}

.btn-2 {
  letter-spacing: 0;
}

.btn-2:hover,
.btn-2:active {
  letter-spacing: 5px;
}

.btn-2:after,
.btn-2:before {
  backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  transition: all 280ms ease-in-out;
  width: 0;
}

.btn-2:hover:after,
.btn-2:hover:before {
  backface-visibility: hidden;
  border-color: #000;
  transition: width 350ms ease-in-out;
  width: 70%;
}

.btn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 70%;
}


</style>

CircleFaust · 13 Apr 2017 at 15:34

thanks i'll give that a try
i noticed his comments are //base styles

is that just because its a different editor?
i need to use /* */ in visual code

AHarvey · 14 Apr 2017 at 00:43

CircleFaust said:
thanks i'll give that a try
i noticed his comments are //base styles

is that just because its a different editor?
i need to use /* */ in visual code

//in css isused to block out the next css block. some people use it as a line comment and it works unless the css is minified.

Keep using the /* */ tags