Jump to content

.London Domains - £4
Photo

Simple CSS Button Div transition

css button div transition

  • Please log in to reply
1 reply to this topic

#1 carloswebtwdf

carloswebtwdf
  • Member
  • Newbie
  • 23 posts

Posted 01 November 2018 - 20:54

Hello guys, godd afternoon !!
 
I studied one apostille about CSS, but I can´t realize one simple task !!
 
Hen I mouseover the 'button.botao', active the movement of 'div.traco' ! See below the 'Source Code' 
 
that I´m trying:

<!DOCTYPE html>
<html>
<head>
<style> 
button.botao {
	width: 150px;
	height: 50px;
	border: none;
	background-color: black;
	color: red;
	font-size: 23px;
}

div.traco {
    width: 20px;
    height: 10px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

button.botao:hover div.traco {
    width: 150px;
}
</style>
</head>
<body>

<button class="botao">Botao</button>
<div class="traco"></div>

</body>
</html>
Help me please !!
Thanks

 


  • 0

#2 DigitalSquid

DigitalSquid
  • Overlord
  • Squidministrator
  • 1,053 posts

Posted 01 November 2018 - 21:04

You just need to add "+" symbol in the last CSS selector. so it targets the adjacent <div>.

 

You can read more about it here:
https://developer.mo...bling_selectors

button.botao:hover + div.traco {
    width: 150px;
}

  • 1

More than happy to help for free but if you want to show some love back, either give me an up-vote or buy me a beer!

www.digitalsquid.net
@Digital_Squid






Also tagged with one or more of these keywords: css, button, div, transition

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users