<button>Neumorphism<span>Maybe I'm a button</span></button>

button {
	
	--color-gradient-start: #4da7db;
	--color-gradient-stop: #5bc6ff;	
	
	--color-outset-start: #3c82aa;
	--color-outset-stop: #6ff1ff;		
	
	--color-inset-start: rgba(0,0,0,0);
	--color-inset-stop: rgba(0,0,0,0);	


	font-size: 2rem;	
	color: #002c59;
	margin: auto; 
	appearance: none;
	user-select: none;
	cursor: pointer; 
	border: 0;
	outline: 0;
	padding: .5em 1em;
	border-radius: 1.3em;
	background: linear-gradient(145deg, var(--color-gradient-start), var(--color-gradient-stop));
	box-shadow:  
		.4em .4em .8em  var(--color-outset-start), 
		-.4em -.4em .8em var(--color-outset-stop),
		inset .2em .2em .4em var(--color-inset-start), 
		inset -.2em -.2em .4em var(--color-inset-stop)		
	;		
	transition: 
		--color-gradient-stop .4s,
		--color-gradient-start .4s,
		--color-outset-start .8s,
		--color-outset-stop .8s,
		--color-inset-start .8s,
		--color-inset-stop .8s,
		color 1s
	;
	

	&:hover {
		--color-gradient-start: #5bc6ff;
		--color-gradient-stop: #4da7db;	
		--color-outset-start: rgba(0,0,0,0);
		--color-outset-stop: rgba(0,0,0,0);	
		--color-inset-start: #3c82aa;
		--color-inset-stop: #6ff1ff;	
		color: #001f3f;		
	}
	

}



body { display: flex; flex-direction: column; height: 100vh; background: #55b9f3; color: #002c59;}
h1 { text-align: center; }
span { font-size: .3em; font-size: italic; display: block; text-align: left; color: inherit; }

CSS.registerProperty({
  name: '--color-gradient-start',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent'
})
CSS.registerProperty({
  name: '--color-gradient-stop',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent'
})

CSS.registerProperty({
  name: '--color-outset-start',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent'
})
CSS.registerProperty({
  name: '--color-outset-stop',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent'
})

CSS.registerProperty({
  name: '--color-inset-start',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent'
})
CSS.registerProperty({
  name: '--color-inset-stop',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent'
})