CODEWITHSUNDEEP
htmlcss
user6668201
user6668201

Reputation: 77

CSS Button turn to normal size smoothly when un-hovered

im new to css and i don't have any idea how to make button get smaller smoothly when user unhovered the button , i have successfully make the button get bigger smoothly but it turn into normal size in instant time , this is my code : 

<html>

<head>

<style>
body {
background-image:url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position:relative;
text-align:center;
border : 5px solid rgba(255,255,255,0.9);
background-color:rgba(0, 199, 255, 0.7);
font-size:100%;
color:white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position:relative;
margin-top:3%;
}
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
}
.menubutton:hover {
background-color:rgba(0,199,255,0.5);
padding: 1.1% 1.1% 1.1% 1.1%;
transition-duration:0.5s;
}
.menutext {
color:white;
}
</style>

</head>

<body>

<div class="title"> <h1 > English Lesson </h1> </div>
<div class="firstcontainer">

<div class="menubar"></div>

<a href="#" class="menutext"><div class="menubutton"><strong><i><u>Home</u></i></strong></div></a>
<a href="#" clas="menutext"><div class="menubutton"><strong><i><u>Contacts</u></i></strong></div></a>


</div>

</body>

</html>

I am sorry if this already asked somewhere but i cannot find it at search engine such as google .

Is there any way to make something like .menubutton:unhover ?

Upvotes: 2

Views: 1223

Answers (6)

Jishnu V S
Jishnu V S

Reputation: 8407

Add transition to menubutton also, the transition property gets applied to the hover state, therefore your animation takes 0.5 second when changing to that specific state. Adding it to the regular state will also apply it when changing back from a special state

body {
	background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
	position: relative;
	text-align: center;
	border : 5px solid rgba(255,255,255,0.9);
	background-color: rgba(0, 199, 255, 0.7);
	font-size: 100%;
	color: white;
	box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
	position: relative;
	margin-top: 3%;
}
.menubutton {
	box-shadow: 10px 10px 5px #888888;
	font-size: 200%;
	margin-left: 1%;
	text-align: center;
	background-color: rgba(0,157,255,0.5);
	display: inline-block;
	color: white;
	border: 3px solid white;
	padding: 1% 1% 1% 1%;
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
}
.menubutton:hover {
	background-color: rgba(0,199,255,0.5);
	padding: 1.1% 1.1% 1.1% 1.1%;
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
}
.menutext {
	color: white;
}
<div class="title">
  <h1 > English Lesson </h1>
</div>
<div class="firstcontainer">
  <div class="menubar"></div>
  <a href="#" class="menutext">
  <div class="menubutton"><strong><i><u>Home</u></i></strong></div>
  </a> <a href="#" clas="menutext">
  <div class="menubutton"><strong><i><u>Contacts</u></i></strong></div>
  </a> 
</div>

Upvotes: 3

kind user
kind user

Reputation: 41913

Try to use - in cases where it's possible - transform property. It handles the animations very smoothly.

In your case, I suggest you to use transform: scale() instead, animation works fine and it looks even better than before.

By the way, if you want to apply a value, e.g. 5px to padding or margin, you don't have to write it separately for all directions, just use simply:

margin: 5px or padding: 5px. It will affect top, bottom, left and right directions together.

body {
  background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
  position: relative;
  text-align: center;
  border: 5px solid rgba(255, 255, 255, 0.9);
  background-color: rgba(0, 199, 255, 0.7);
  font-size: 100%;
  color: white;
  box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
  position: relative;
  margin-top: 3%;
}
.menubutton {
  box-shadow: 5px 5px 2px #888888;
  font-size: 200%;
  text-align: center;
  background-color: rgba(0, 157, 255, 0.5);
  display: inline-block;
  color: white;
  border: 3px solid white;
  padding: 4px;
  margin: 4px;
  transition: all .5s ease;
}
.menubutton:hover {
  background-color: rgba(0, 199, 255, 0.5);
  transform: scale(1.1);
  transition: all .5s ease;
}
.menutext {
  color: white;
}
<div class="title">
  <h1> English Lesson </h1> 
</div>
<div class="firstcontainer">

  <div class="menubar"></div>

  <a href="#" class="menutext">
    <div class="menubutton"><strong><i><u>Home</u></i></strong>
    </div>
  </a>
  <a href="#" clas="menutext">
    <div class="menubutton"><strong><i><u>Contacts</u></i></strong>
    </div>
  </a>


</div>

Upvotes: 0

El Danielo
El Danielo

Reputation: 780

<html>

<head>

<style>
body {
background-image:url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position:relative;
text-align:center;
border : 5px solid rgba(255,255,255,0.9);
background-color:rgba(0, 199, 255, 0.7);
font-size:100%;
color:white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position:relative;
margin-top:3%;
}
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
transition: padding 0.1s;
}
.menubutton:hover {
background-color:rgba(0,199,255,0.5);
padding: 1.1% 1.1% 1.1% 1.1%;
}
.menutext {
color:white;
}
</style>

</head>

<body>

<div class="title"> <h1 > English Lesson </h1> </div>
<div class="firstcontainer">

<div class="menubar"></div>

<a href="#" class="menutext"><div class="menubutton"><strong><i><u>Home</u></i></strong></div></a>
<a href="#" clas="menutext"><div class="menubutton"><strong><i><u>Contacts</u></i></strong></div></a>


</div>

</body>

</html>

Just remove transition-duration from hover element and add a transition: padding 0.1s to the button class. The animation does not look so smooth due to small padding change.

Upvotes: 0

Banzay
Banzay

Reputation: 9470

You need to use scale() effect and apply transition-duraion for both unhovered and hovered button

Look at snippet:

body {
background-image:url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position:relative;
text-align:center;
border : 5px solid rgba(255,255,255,0.9);
background-color:rgba(0, 199, 255, 0.7);
font-size:100%;
color:white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position:relative;
margin-top:3%;
}
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
transition-duration: 0.5s;
}
.menubutton:hover {
transform: scale(1.2);
transition-duration: 0.5s;
}
.menutext {
color:white;
}
<div class="title"> <h1 > English Lesson </h1> </div>
<div class="firstcontainer">

<div class="menubar"></div>

<a href="#" class="menutext"><div class="menubutton"><strong><i><u>Home</u></i></strong></div></a>
<a href="#" clas="menutext"><div class="menubutton"><strong><i><u>Contacts</u></i></strong></div></a>


</div>

Upvotes: 0

Sam Willis
Sam Willis

Reputation: 4211

Your transition property needs to be on the default .menubutton class. This means that when you hover the button it will transition to the new style and then back to the default again when you stop hovering.

.menubutton {
  box-shadow: 10px 10px 5px #888888;
  font-size:200%;
  margin-left:1%;
  text-align:center;
  background-color: rgba(0,157,255,0.5);
  display:inline-block;
  color:white;
  border:3px solid white;
  padding:1% 1% 1% 1%;
  transition-duration:0.5s;
}
.menubutton:hover {
  background-color:rgba(0,199,255,0.5);
  padding: 1.1% 1.1% 1.1% 1.1%;
}

The reason that your animation doesn't work when you stop hovering is that the transition property is no longer applied to the element, as it only exists on hover.

Upvotes: 1

vedankita kumbhar
vedankita kumbhar

Reputation: 1500

Add to class

.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
}

Upvotes: 0

Related Questions