I would like to get the same time (0.4s) after hover off from button (now is 0s).
If I hover off from button there is no transition.
After hover it took 0s. I would like to have 0.4 like it is in hover state.
.btn_akoo {
text-transform: uppercase;
background-color:#e92741;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
border:3px solid #f5f487;
display:inline-block;
cursor:pointer;
color:#2d2f3c;
font-family:Verdana;
font-size:17px;
font-weight:bold;
padding:30px 18px;
text-decoration:none;
position: relative;
margin-left: 38%;
margin-top: 18%;
}
.btn_akoo:hover {
background: #2d2f3c;
color: #e92741;
padding-left: 30px;
padding-right: 30px;
-webkit-box-shadow:0px 0px 40px 1px #f5f487 ;
-moz-box-shadow:0px 0px 40px 1px #f5f487 ;
box-shadow:0px 0px 40px 1px #f5f487 ;
transition: 0.4s ;
}
<div class="wrapper_akoo">
<a class="btn_akoo" href="#" >Ako sa zaregistrovať?</a>
</div>
Set the transition in the base class instead of the :hover state:
.btn_akoo {
text-transform: uppercase;
background-color: #e92741;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #f5f487;
display: inline-block;
cursor: pointer;
color: #2d2f3c;
font-family: Verdana;
font-size: 17px;
font-weight: bold;
padding: 30px 18px;
text-decoration: none;
position: relative;
margin-left: 38%;
margin-top: 18%;
transition: 0.4s;
}
.btn_akoo:hover {
background: #2d2f3c;
color: #e92741;
padding-left: 30px;
padding-right: 30px;
-webkit-box-shadow: 0px 0px 40px 1px #f5f487;
-moz-box-shadow: 0px 0px 40px 1px #f5f487;
box-shadow: 0px 0px 40px 1px #f5f487;
}
<div class="wrapper_akoo">
<a class="btn_akoo" href="#">Ako sa zaregistrovať?</a>
</div>
I need to make sure that the 'Next' button below the video is centered vertically and horizontally within the block with the yellow background.
In addition, the 'click' effect on the button does not seem to work as intended. There is something causing a conflict here and I cannot figure out what.
When I only run the "next-video-button" and "next-video-button:active" CSS rules, everything works perfectly.
You may find my CSS and HTML below.
.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;
}
.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;
}
<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">NEXT</div>
To center the button give it a width and add margin: 0 auto and display: block; to .next-video-button.
The button won't work though because of a href="#". Replace the # with the video URL.
Hopefully somebody can help me with my issue.
I'm trying to make my own website, but when I try to move one of the three individual boxes(see picture), all three of them move. three boxes issue
[The same issue also happens with the social icons box but I'm less concerned with that section]
I'm hoping someone can take a look at the code and hopefully tell me where I've gone wrong.
My Website Files
You have put position:block in your css. There is no position:block in css. You have to use display property to that. I have change your box div's css to display: inline-block; and made few changes in width too.(using calc).
#import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Source+Sans+Pro');
#import url('https://fonts.googleapis.com/css?family=Poppins');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url(../css/images/background/backgroundimage.jpg);
}
/* HEADERBAR */
div#headerbar {
width: 100%;
height: 50px;
display: inline-block;
background-color: rgba(237,87,82, 0.65);
font-family: 'Source Sans Pro', sans-serif;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.leftlogo {
float: left;
margin-top: 12px;
margin-left: 15px;
color: #fff;
text-shadow: 1px 1px 1px #000;
font-size: 20px;
font-family: 'roboto+condensed', sans-serif;
}
.leftlogo span {
font-weight: 300;
color: rgba(237, 87, 82, 0.8);
font-size: 20px;
font-family: 'roboto', sans-serif;
}
.version {
float: right;
margin-top: 14px;
margin-right: 10px;
}
/* CODE TEST */
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 21px/40px;
background-clip: padding-box;
text-align: center;
}
.button {
margin-top: 10px;
font-size: 1em;
padding: 14px;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
font-family: 'Source Sans Pro', sans-serif;
}
.button:hover {
background: rgba(255, 255, 255, 0.3);
border: 3px solid #000;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #000;
border-radius: 5px;
border: 5px solid #126b72;
width: 70%;
position: relative;
transition: all 5s ease-in-out;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
div#updatesbox {
width: 900px;
height: 40px;
background-color: #000;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
}
.updatesbox1 {
width: 443px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
display:inline-block;
margin-top: 5px;
margin-left: 5px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.updatesbox2 {
width: 443px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
float: right;
display: inline-block;
margin-top: 5px;
margin-right: 5px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.twitter {
float: left;
margin-top: 7px;
margin-left: 40px;
}
.tweet {
color: white;
}
.facebook a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.facebookicon {
margin-left: 5px;
margin-top: 7px;
}
.steam a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.steamicon {
margin-left: 5px;
margin-top: 7px;
}
.instagram a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.instaicon {
margin-left: 5px;
margin-top: 7px;
}
.tweet a {
color: rgba(237, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
/* ALTERNATING TEXT */
#tickertape{
display: block;
margin-left: 600px;
margin-right: auto;
margin-top: 14.5px;
text-align: center;
width:400px;
height:20px;
}
.tickertape {
display: block;
margin-top: 6px;
margin-left: 20px;
margin-right: auto;
color: #000;
}
#subtickertape{
position:absolute;
width:443px;
height:20px;
}
.subtickertapefont{
font:bold 12px Verdana;
text-decoration:none;
color: rgba(237, 87, 84, 0.6);
text-shadow: 2px 2px 2px #000;
}
.subtickertapefont a{
color:white;
text-decoration:none;
}
/* BODY CONTAINER BOX */
div#bodycontainer {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
background-color: rgba(237, 87, 84, 0.3);
width: 90%;
height: 800px;
border: 2px dashed #000;
}
#bodycontainer #insidebox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 500px;
margin: 15px;
margin-top: 70px;
background: rgba(237, 87, 84, 0.2);
border: 2px dashed #000;
}
#bodycontainer #centerbox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 400px;
margin: auto;
margin-top: 200px;
background: rgba(255, 255, 255, 0.2);
border: 2px dashed #000;
}
#rightbox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 710px;
margin: auto;
margin-top: 0px;
background: rgba(237, 87, 84, 0.2);
border: 2px dashed #000;
margin-left: 15px !important;
}
change your stylesheet.css to this and then you can move each box individually. Hope this helps you.
I have a question about html and css. I am trying to make an div with text---slider--text. Here is the photo of how it supposed to look.
This is my current situation.
I hope someone can help me with getting this elements on 1 line.
.information_seperator {
height: 4vh;
background-color: #ffffff;
}
.divider {
width: 50vw;
background-color: #ffc539;
margin-top: 0px;
margin-bottom: 0px;
}
.divider:after {
content: " ";
width: 5px;
height: 5px;
position: relative;
top: 0;
right: 10px;
background-color: #ffc539;
}
<div class="information_seperator">
<!--<div class="row">-->
<span class="text_info">AMS</span>
<hr class="divider">
<!--<input data-provide="slider" id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="20"/>-->
<!--<span style="color: #ffc539">●</span>-->
<span>JFC</span>
<!--</div>-->
</div>
You can do this with Flexbox and JQuery UI
$('.circle').draggable({
axis: "x",
containment: ".line"
});
.slider {
display: flex;
align-items: center;
}
.line {
flex: 1;
height: 4px;
background: #FBC538;
position: relative;
margin: 0 10px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: #FBC538;
position: absolute;
left: 0;
top: -8px;
}
span:not(.circle) {
font-size: 30px;
font-weight: bold;
font-family: Sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="slider">
<span>AMS</span>
<div class="line"><span class="circle"></span></div>
<span>JFC</span>
</div>
I think you need to read up on
display: inline-block
To align elements next to one another use : display:inline;
Example :
span,
div {
display: inline;
}
//Slider
input[type=range] {
-webkit-appearance: none;
margin: 18px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<span>text</span>
<div>
<input type=range />
</div>
<span>text</span>
If I remove the float:left attribute from .action-button the transform animation doesn't work. Can you explain what is happening here?
Markup:
Are
Styles:
.action-button
{
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
.green
{
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.action-button:active
{
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
Codepen line 17: http://codepen.io/koriolis/pen/euAEg
This is because a elements are inline elements, in that they align the the parent element and do not clear either side.
When you add float: left, It changes the elements from being inline to block but also removes the clear: both and allows for elements to be aligned next to each other.
You can achieve the same effect as a float by using inline-block if you don't want the tags to float on the page.
.action-button {
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
display: inline-block;
border-radius: 8px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
CodePen Example
tag a - default display: inline
float: left - display property is set to block
when you remove float: left - a again display: inline
use display: inline-block instead float: left
body {
padding: 50px;
}
.animate {
transition: all 0.1s;
-webkit-transition: all 0.1s;
}
.action-button {
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
display: inline-block;
border-radius: 8px;
font-family:'Pacifico', cursive;
font-size: 25px;
color: #FFF;
text-decoration: none;
}
.blue {
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}
.red {
background-color: #E74C3C;
border-bottom: 5px solid #BD3E31;
text-shadow: 0px -2px #BD3E31;
}
.green {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
.yellow {
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
}
.action-button:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
border-bottom: 1px solid;
}
Hello
How
Are
You?
fiddle