Ira Ira - 4 days ago 3
CSS Question

'Click' animation effect on button with CSS

I am not able to achieve the click-effect in my Next button (see snippet 1).

In the first snippet it is achievend with the

float: left;
value, but when I insert it into my code, it breaks the position of the button. My 'Next' button is supposed to be the way it is the second snippet, i.e. vertically and horizontally centered.

Any ideas how to find a workaround here?

Snippet 1



.next-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 25px;
color: #ffffff;
text-decoration: none;
background-color: #f9c60f;
border-bottom: 5px solid #888888;
text-shadow: 1px -2px #888888;
}

.next-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}

<html lang="en">
<head>
<body>
<a href="#" class="next-button">NEXT</a>
</body>
</html>





Snippet 2 (My code)



.next-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 25px;
color: #ffffff;
text-decoration: none;
background-color: #f9c60f;
border-bottom: 5px solid #888888;
text-shadow: 1px -2px #888888;
}.course-video {
background: #f9c70f;
border: none;
margin: 0;
box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
border-radius: 0;
-moz-border-radius: 0;

}

.next-video-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
padding:7px 200px;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 1em;
color: #ffffff;
text-decoration: none;
background-color: #888888;
border-bottom: 5px solid #5a5a5a;
text-shadow: 1px -2px #888888;
text-align: center;
line-height:49px;


}

.next-video-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}

.video-title {
font-family: montserrat;
font-size: 1.5em;
color: #000000;
padding: 0.5em;
box-sizing: border-box;
width: 854px;
text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}

.video-descr {
width: 854px;
box-sizing: border-box;
height: 50px;
margin-top: -5px;
text-align:center;
}

.next-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}

<div class="course-video video-title">Hello</div>
<iframe src="https://player.vimeo.com/video/154094373" width="854" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="course-video video-descr"><a href="#" class="next-video-button">NEXT</a></div>




Answer

Try using

.next-video-button {
   display:inline-block;
   ...
}

instead of

float:left

Using inline-block makes the element act like it was text so your text-aligns will work on these as well

Comments