Jump to content

.London Domains - £4

Simple CSS Button Div transition

css button div transition

  • Please log in to reply
1 reply to this topic

#1 carloswebtwdf

  • Member
  • Newbie
  • 26 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>
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;

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

Help me please !!


  • 0

#2 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:

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!


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

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users