כפתורים מיוחדים עם אלמנטור ו-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);
}

				
					selector .elementor-button {
    position: relative;
  width: 300px;
  height: 75px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  overflow: hidden;
}
selector .elementor-button:hover {
  color: #fff;
}
selector .elementor-button:after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.6s ease;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: url(https://wpguide.co.il/wp-content/uploads/btn-bg2.png);
  background-size: cover;
}
selector .elementor-button:hover:after {
  width: 100%;
}

Button Button Button Button Button Button

				
					selector a
{
transition: 0.5s;
	background: linear-gradient(to right, #fdfc47, #24fe41, #fdfc47);
	background-size: 200%;
}
selector a:hover
{
	background-position-x: 100%;
	transform: translateY(-15px);
}
selector a:after
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: rgba(255,255,255,.2);
}
selector a:before
{
	content: '';
	position: absolute;
	bottom: 0px;
	left: 5%;
	width: 90%;
	height: 4px;
	background: rgba(0,0,0,0.2);
	border-radius: 50%;
	transform: scale(0);
	transition: 0.5s;
	filter: blur(5px);
	z-index: -1;
}
selector a:hover:before
{
	transform: scale(1);
	bottom: -15px;
}

רוני רביץ

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