'Separate two html buttons and remove the fist button green animation

There are two HTML buttons in the code below.

  1. Currently they are stuck together. I need to introduce a gap between them
  2. When you hover the mouse over the first (top) button, there is a green colour animation would show up around the button. I need to remove that.

Please advise me on how to make the proposed changes.

    
<body>

    <div class="btn">
        <div class="btn-back">
            <p>Escolha o seu tamanho!</p>
            <button class="yp">36</button>
            <button class="no">No</button>
            <button class="tsete">37</button>
            <button class="toito">38</button>
            <button class="tnove">39</button>
            <button class="qzero">40</button>
            <button class="qum">41</button>
            <button class="qdois">42</button>
            <button class="qtres">43</button>
        </div>
        <div class="btn-front">Azul</div>
    </div>
    <script src="script.js"></script>
    <style type="text/css" media="screen">
        
        
        Separate two html buttons and remove the fist button green animation
        
        
html, body {
    
  
  }

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Montserrat', black;
  font-size: 18px;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  background-color: white;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.description {
  margin-top: 50px;
  text-align: center;
  color: #999;
  -webkit-transition: opacity 0.3s ease;
          transition: opacity 0.3s ease; }

.description a {
  color: #4A9DF6;
  text-decoration: none; }

.btn.is-open ~ .description {
  opacity: 0; }

.btn {
  display: block;
  position: relative;
  min-width: calc(300px + 12px);
  min-height: calc(60px + 12px);
  
  border-radius: 100px;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 0px;

  
 
  
  -webkit-transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  text-align: center; 
}

.btn-front {
  position: absolute;
 
  border-radius: 100px;
  display: block;
  width: 312px;
  height: 72px;
  line-height: 80px;
  background-color: #007edc;
 font-family: 'Montserrat', black;
  font-weight: 650;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  cursor: pointer;
  

  
  
 
  
  
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
          transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1); } 

  .btn-front:hover {
    background-color: #0d98ff; }
    


.btn-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eee;
  color: #222;
  -webkit-transform: translateZ(-2px) rotateX(180deg);
          transform: translateZ(-2px) rotateX(180deg);
  overflow: hidden;
  -webkit-transition: box-shadow 0.8s ease;
          transition: box-shadow 0.8s ease; }
  .btn-back p {
    margin-top: 27px;
    margin-bottom: 25px; }
  .btn-back button {
    padding: 12px 20px;
    width: 30%;
    margin: 0 5px;
    background-color: transparent;
    border: 500px;
    border-radius: 2px;
    font-size: 1em;
    cursor: pointer;


    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: background 0.15s ease;
            transition: background 0.15s ease; }
            
  .btn-back button:focus {
    outline: 0; }
  .btn-back button.yp {
    background-color: #2196F3;
    color: #fff; }
    .btn-back button.yp:hover {
      background-color: #51adf6; }
  .btn-back button.no {
    color: #2196F3; }
    .btn-back button.no:hover {
      background-color: #ddd; }

      .btn-back button.tsete {
    color: #2196F3; }
    .btn-back button.tsete:hover {
      background-color: #ddd; }
.btn-back button.toito {
    color: #2196F3; }
    .btn-back button.toito:hover {
      background-color: #ddd; }
.btn-back button.tnove {
    color: #2196F3; }
    .btn-back button.tnove:hover {
      background-color: #ddd; }
      .btn-back button.qzero {
    color: #2196F3; }
    .btn-back button.qzero:hover {
      background-color: #ddd; }
      .btn-back button.qum {
    color: #2196F3; }
    .btn-back button.qum:hover {
      background-color: #ddd; }
      .btn-back button.qdois {
    color: #2196F3; }
    .btn-back button.qdois:hover {
      background-color: #ddd; }
      .btn-back button.qtres {
    color: #2196F3; }
    .btn-back button.qtres:hover {
      background-color: #ddd; }

.btn[data-direction="left"] .btn-back,
.btn[data-direction="right"] .btn-back {
  -webkit-transform: translateZ(-2px) rotateY(180deg);
          transform: translateZ(-2px) rotateY(180deg); }

.btn.is-open {
  width: 400px;
  height: 210px; 
  }
  .btn.is-open .btn-front {
    pointer-events: none;
    
    line-height: 60px; }
  .btn.is-open .btn-back {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); }

.btn[data-direction="top"].is-open {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg); }

.btn[data-direction="right"].is-open {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); }

.btn[data-direction="bottom"].is-open {
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg); }

.btn[data-direction="left"].is-open {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg); }
        @font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


            .project-title {
                position: absolute;
                left: 25px;
                bottom: 8px;

                font-size: 16px;
                color: #444;
            }

            .credits {
                position: absolute;
                right: 20px;
                bottom: 25px;
                font-size: 15px;
                z-index: 20;
                color: #444;
                vertical-align: middle;
            }

            .credits * + * {
                margin-left: 15px;
            }

            .credits a {
                padding: 8px 10px;
                color: #444;
                border: 2px solid #999;
                text-decoration: none;
            }

            .credits a:hover {
                border-color: #555;
                color: #222;
            }

            @media screen and (max-width: 1040px) {
                .project-title {
                    display: none;
                }

                .credits {
                    width: 100%;
                    left: 0;
                    right: auto;
                    bottom: 0;
                    padding: 30px 0;
                    background: #ddd;
                    text-align: center;
                }

                .credits a {
                    display: inline-block;
                    margin-top: 7px;
                    margin-bottom: 7px;
                }
            }
        
        </style>
    <script>
            var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
            (function(d, t) {
            var g = d.createElement(t),
                s = d.getElementsByTagName(t)[0];
            g.async = true;
            
            s.parentNode.insertBefore(g, s);
            })(document, 'script');
            window.onload = function() {

    var btn = document.querySelector( '.btn' );

    var btnFront = btn.querySelector( '.btn-front' ),
        btn36 = btn.querySelector( '.btn-back .yp' ),
        btnNo = btn.querySelector( '.btn-back .no' );
    btn37 = btn.querySelector( '.btn-back .tsete' );
     btn38 = btn.querySelector( '.btn-back .toito' );
      btn39 = btn.querySelector( '.btn-back .tnove' );
       btn40 = btn.querySelector( '.btn-back .qzero' );
        btn41 = btn.querySelector( '.btn-back .qum' );
         btn42 = btn.querySelector( '.btn-back .qdois' );
          btn43 = btn.querySelector( '.btn-back .qtres' );


    btnFront.addEventListener( 'click', function( event ) {
        var mx = event.clientX - btn.offsetLeft,
            my = event.clientY - btn.offsetTop;

        var w = btn.offsetWidth,
            h = btn.offsetHeight;

        var directions = [
            { id: 'top', x: w/2, y: 0 },
            { id: 'right', x: w, y: h/2 },
            { id: 'bottom', x: w/2, y: h },
            { id: 'left', x: 0, y: h/2 }
        ];

        directions.sort( function( a, b ) {
            return distance( mx, my, a.x, a.y ) - distance( mx, my, b.x, b.y );
        } );

        btn.setAttribute( 'data-direction', directions.shift().id );
        btn.classList.add( 'is-open' );

    } );

    btn36.addEventListener( 'click', function( event ) {
        btn.classList.remove( 'is-open' );
    } );

    btnNo.addEventListener( 'click', function( event ) {
        btn.classList.remove( 'is-open' );
    } );

    function distance( x1, y1, x2, y2 ) {
        var dx = x1-x2;
        var dy = y1-y2;
        return Math.sqrt( dx*dx + dy*dy );
    }
    

};

        </script>
</body>


<div class="wrap">
    <form action="b_657272">
  <button class="button">COMPRAR AGORA</button> 


<style>
.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  min-width: 300px;
  min-height: 60px;
  font-family: 'Montserrat', black;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 5.px;
  font-weight: 700;
  color: #313133;
  background: #4FD1C5;
background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
  border: none;
  border-radius: 1000px;
  box-shadow: 12px 12px 24px rgba(79,209,197,.64);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;
  }

button::before {
content: '';
  border-radius: 100px;
  min-width: calc(300px + 12px);
  min-height: calc(60px + 12px);
  border: 6px solid #00FFCB;
  box-shadow: 0 0 60px rgba(0,255,203,.64);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

.button:hover, .button:focus {
  color: #313133;
  transform: translateY(-6px);
}

button:hover::before, button:focus::before {
  opacity: 1;
}

button::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 6px solid #00FFCB;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
  content: '';
  border-radius: 100px;
  min-width: calc(300px + 12px);
  min-height: calc(60px + 12px);
  border: 6px solid #00FFCB;
  box-shadow: 0 0 60px rgba(0,255,203,.64);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
  
}

button:hover::after, button:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: 250px;
    height: 0px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 150px;
    opacity: 0;
  }
}
<form action="https://google.com">
 </style>
 </div>
htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions