Utilisez Divi pour ajouter une conception matérielle à votre site Web

– Oui. Et \ \ u pb \ \ u Button: Hover {
Ombre de la boîte: 0 25px 55px 0 rgba (0, 0, 0, 0,21), 0 16px 28px 0 rgba (0, 0, 0, 0,22);
En haut de la marge: – 5px;
En bas de la marge: 5px! Important
}
– Oui. Tissu Et \ \ u pb \ \ u Button: Hover: after {
Hauteur de la ligne: 1,7em;
– transformation webkit: rotation (- 90 degrés);
Transformation: rotation (- 90 degrés);
}
– Oui. Tissu Et pb Line {fill: 27px 15px;}
– Oui. Tissu Et \ \ u pb \ \ u column {
Ombres de boîte: 0 3px 10px rgba (0, 0, 0, 0,23), 0 3px 10px rgba (0, 0, 0, 0,16);
– conversion webkit: tous. 2 s relax;
– transition MOZ: toutes les 0,2 secondes de détente;
MS transition: All 0.2 second Release;
O – transition: toutes les 0,2 secondes de rémission;
Transition: toutes les 0,2 secondes de soulagement;
}
– Oui. Tissu Et \ \ u pb \ \ u colonnes: stationnaire {
Ombres de boîte: 0 6px 20px rgba (0, 0, 0, 0,23), 0 6px 20px rgba (0, 0, 0, 0,16);
}
Enregistrer les modifications et vérifier les résultats finaux. En plus d’utiliser des couleurs en gras sur fond blanc, vous avez maintenant une petite action supplémentaire pour aider les utilisateurs à rendre les matériaux vivants. Chacune des quatre colonnes du carré a une légère hauteur de repos (par coloration) qui augmente avec le mouvement de la souris. Le bouton est situé entre l’image et le contenu et sa hauteur de repos augmente avec le mouvement de la souris de 5 pixels. De plus, lorsque vous passez le curseur sur le bouton, l’icône du bouton tourne de 90 degrés dans le sens contraire des aiguilles d’une montre, de la mise à la mise. De plus, lorsque vous passez le curseur sur la boîte de colonne, l’image est agrandie. Notez que chaque transition et Mouvement est ferme et rapide. Ils devraient être suffisamment cohérents pour attirer l’attention, mais assez rapides pour ne pas perturber la continuité de l’expérience utilisateur. Quant à la mise en page de ce design, vous pouvez l’utiliser pour de nombreuses choses différentes, comme un portefeuille de premier plan, un service de premier plan ou un CTA. Le ciel est la limite. Si vous voulez ajouter plus de contenu à la boîte, vous pouvez