animate σε buttons

[rafinos]

Γεια σας παιδιά!

 

Δείτε λίγο αυτό το codepen... https://codepen.io/rafail/pen/yoERdy

 

Πως μπορώ να κάνω όταν πατιέται ένα κουμπί, να συμβαίνει το animation που έχω με την "clicky" αίσθηση, αλλά για παράδειγμα όταν πατάω το πρώτο κουμπί να μην κινούνται όλα τα κουμπιά προς τα πάνω (μάλλον κάτι παίζει με το height του κουμπιού αλλά δεν μπορώ να καταλάβω τι ). 

[panospc]

Για δοκίμασε με τις παρακάτω αλλαγές

.main_btns{
	margin: 0 auto;
	padding: 10px 15px;
	background-color: #2C82C9;
	border-radius: 10px;
	height: 27px;
	box-shadow: inset 0 -5px 0px 0px #09466f;
	-moz-box-shadow: inset 0 -5px 0px 0px #09466f;
	-webkit-box-shadow: inset 0 -5px 0px 0px #09466f;
	color: #fff;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	display: block;
	margin-bottom: 10px;
	text-decoration: none;
}

.main_btns:active
{
	transform: translate(0px,4px);
	-webkit-transform: translate(0px,4px);
	box-shadow: inset 0 -1px 0px 0px #09466f;
	-moz-box-shadow: inset 0 -1px 0px 0px #09466f;
	-webkit-box-shadow: inset 0 -1px 0px 0px #09466f;
}

[XPHSTOS_]

Το πρόβλημα δεν είναι το height αλλά το border-bottom.
Όταν δημιουργείς borders το μέγεθος τους προστείθεται σε αυτό του element.
Άρα όταν στο hover εσύ το μηδενίζεις χάνει το element το συνολικό του μέγεθος άρα τα υπόλοιπα element μετακινούνται στον χώρο αναλόγως.

Η λύση που σου προτείνει ο Πάνος είναι η πιο σωστή.

Μια άλλη λύση θα ήταν να κρατήσεις το border-bottom όπως το έχεις και στο hover να ΜΗΝ μικραίνει αλλά το χρώμα της σκιάς να γίνεται διάφανο (transparent ή rbga(0,0,0,0,0)),
Έτσι πετυχαίνεις παρόμοιο αποτέλεσμα, εκτός του πολύ λεπτού border που άφηνες προηγουμένως.

Θα μπορούσες επίσης να έβαζες και ένα box-shadow: inset ...  στο hover state έτσι θα φαινόταν ότι το button κατέβαινε πιο βαθιά.
Δες τι εννοώ: https://codepen.io/anon/pen/xLzBKq
 

[rafinos]

 

Για δοκίμασε με τις παρακάτω αλλαγές

.main_btns{
	margin: 0 auto;
	padding: 10px 15px;
	background-color: #2C82C9;
	border-radius: 10px;
	height: 27px;
	box-shadow: inset 0 -5px 0px 0px #09466f;
	-moz-box-shadow: inset 0 -5px 0px 0px #09466f;
	-webkit-box-shadow: inset 0 -5px 0px 0px #09466f;
	color: #fff;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	display: block;
	margin-bottom: 10px;
	text-decoration: none;
}

.main_btns:active
{
	transform: translate(0px,4px);
	-webkit-transform: translate(0px,4px);
	box-shadow: inset 0 -1px 0px 0px #09466f;
	-moz-box-shadow: inset 0 -1px 0px 0px #09466f;
	-webkit-box-shadow: inset 0 -1px 0px 0px #09466f;
}

Αλήθεια το height γιατί το δίνεις; 

 

Όπως και να 'χει ευχαριστώ πολύ παιδιά!

[panospc]

Αλήθεια το height γιατί το δίνεις;

Το έβαλα πρόχειρα γιατί χωρίς το border-bottom έβγαιναν μικρότερα σε ύψος τα κουμπιά και δεν ήταν κεντραρισμένο το κείμενο στο κάθετο άξονα. Το πιο σωστό μάλλον θα ήταν να αλλάξω το padding

[rafinos]

Το πρόβλημα δεν είναι το height αλλά το border-bottom.

Όταν δημιουργείς borders το μέγεθος τους προστείθεται σε αυτό του element.

Άρα όταν στο hover εσύ το μηδενίζεις χάνει το element το συνολικό του μέγεθος άρα τα υπόλοιπα element μετακινούνται στον χώρο αναλόγως.

 

Η λύση που σου προτείνει ο Πάνος είναι η πιο σωστή.

 

Μια άλλη λύση θα ήταν να κρατήσεις το border-bottom όπως το έχεις και στο hover να ΜΗΝ μικραίνει αλλά το χρώμα της σκιάς να γίνεται διάφανο (transparent ή rbga(0,0,0,0,0)),

Έτσι πετυχαίνεις παρόμοιο αποτέλεσμα, εκτός του πολύ λεπτού border που άφηνες προηγουμένως.

 

Θα μπορούσες επίσης να έβαζες και ένα box-shadow: inset ...  στο hover state έτσι θα φαινόταν ότι το button κατέβαινε πιο βαθιά.

Δες τι εννοώ: https://codepen.io/anon/pen/xLzBKq

 

 

Αρχικά δεν το είχα προσέξει, αλλά στο παράδειγμά σου γίνεται αυτό που "φοβόμουν". Αν δεις καλύτερα όταν γίνεται το click ναι μεν γίνεται transparent το border, αλλά σε εκείνο το σημείο φαίνεται ένα έξτρα κομμάτι background από το κουμπί. 

[XPHSTOS_]

Αρχικά δεν το είχα προσέξει, αλλά στο παράδειγμά σου γίνεται αυτό που "φοβόμουν". Αν δεις καλύτερα όταν γίνεται το click ναι μεν γίνεται transparent το border, αλλά σε εκείνο το σημείο φαίνεται ένα έξτρα κομμάτι background από το κουμπί. 

Δεν το βλέπω αυτό που λες...

Μήπως εννοείς την σκιά επάνω?

Εκείνο το έβαλα εσκεμμένα..

[rafinos]

Όχι, αν το δεις για παράδειγμα εγώ θέλω εκεί που αρχικά τελειώνει στο κάτω μέρος η "σκιά" του κουμπιού, να τελειώνει και όταν γίνει click. Τώρα πηγαίνει λίγο παρακάτω. 

 

Βέβαια, το διόρθωσα με τη βοήθεια του w3schools είχε παράδειγμα παρόμοιο.

 

https://codepen.io/rafail/pen/yoERdy

[XPHSTOS_]

Όχι, αν το δεις για παράδειγμα εγώ θέλω εκεί που αρχικά τελειώνει στο κάτω μέρος η "σκιά" του κουμπιού, να τελειώνει και όταν γίνει click. Τώρα πηγαίνει λίγο παρακάτω. 

 

Βέβαια, το διόρθωσα με τη βοήθεια του w3schools είχε παράδειγμα παρόμοιο.

 

https://codepen.io/rafail/pen/yoERdy

Το ίδιο πράγμα λέμε...

 

Εγώ επίτηδες έβαλα και ένα inset shadow για να φαίνεται ότι το κουμπί κατεβαίνει ακόμη πιο κάτω.

Αν σβήσεις το box-shadow τότε θα είναι όπως το θες