כפתורים מיוחדים עם אלמנטור ו-CSS

הנה אוסף של כפתורים מגניבים עם הוספת קצת קוד, את הקוד מוסיפים ב-css מותאם.

בחלק מהדוגמאות כאן, תצטרכו להגדיר באלמנטור את צבע הרקע/טקסט של הכפתור – לשקוף.

כמו כן תוכלו לשנות בקוד את הצבעים ועוד כרצונכם.

				
					selector .elementor-button {background-image: linear-gradient(to right, #EDE574 0%, #E1F5C4 51%, #EDE574 100%)}
selector .elementor-button {
transition: 0.5s;
background-size: 200% auto;
}
selector .elementor-button:hover {
background-position: right center;
}
				
			
				
					selector .elementor-button{
  box-shadow: 2px 2px 4px #c8d0e7, -1px -1px 3px #fff;
  }
selector .elementor-button:active {
  box-shadow: inset 1px 1px 3px #c8d0e7, inset -1px -1px 3px #fff;
}
				
			
				
					selector .elementor-button{
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border: 1px solid #000;
  color: #000;
  background: transparent;
  z-index: 1;
}
selector .elementor-button:hover:after {
  top: 0;
  left: 0;
}
selector .elementor-button:after{
  content: "";
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 5px;
  left: 5px;
  transition: 0.2s;
  background-color: #3a86ff;
} 
				
			
				
					selector .elementor-button {
 color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
  background: #ff0a78;
 z-index: 1;
}
selector .elementor-button:hover:after {
  width: 100%;
  right: 0;
}
selector .elementor-button:after {
  
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  z-index: -1;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
  background-color: #ff6392;
  left:  0;
}
selector .elementor-button:active {
  top: 2px;
}
				
			
				
					selector .elementor-button {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  z-index: 0;
  overflow: hidden;
  
}
selector .elementor-button:hover {
  color: #fff;
}
selector .elementor-button:hover:after {
  width: 100%;
}
selector .elementor-button:after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #2c0b8e;
}
				
			
				
					selector .elementor-button-text{
    transition: all 0.3s
}
selector .elementor-button .fas{
    transform: translate(-100px, 0);
    transition: all 0.4s
}
selector .elementor-button:hover .fas{
    transform: translate(0px, 0);
}
selector .elementor-button:hover .elementor-button-text{
    transform: translate(5px, 0);
}
				
			

כתיבת תגובה

האימייל לא יוצג באתר.

קורס אלמנטור מתקדם

12 טיפים מהירים לשיפור עיצוב האתר

הרשמה לניוזלטר

כדאי לכם ;)

רגע, יש לי עוד..

סליחה שאני מפריע ככה, אבל ממש עכשיו הוצאתי קורס חדש.

קורס אלמנטור מתקדם

ועכשיו יש הנחה מיוחדת!!