구글덕후의 CSS 다양한 버튼만들기 #2

1편의 간단한 버튼 CSS에 이은 다양한 버튼만들기 2편.

 

		button {
			background-color: #4CAF50; /* Green background */
			border: none; /* Remove borders */
			color: white; /* White text */
			padding: 15px 32px; /* Some padding */
			text-align: center; /* Center text */
			text-decoration: none; /* Remove underline */
			display: inline-block; /* Make it a block element */
			font-size: 16px; /* Set font size */
			margin: 20px; /* Add some margin */
			cursor: pointer; /* Add a pointer on hover */
			border-radius: 10px; /* Add border radius */
		}
		
		/* Button 1 */
		#btn1:hover {
			animation: pulse 0.5s infinite;
		}
		
		/* Button 2 */
		#btn2:hover {
			animation: spin 0.5s infinite;
		}
		
		/* Button 3 */
		#btn3:hover {
			animation: color-change 0.5s infinite;
		}
		
		/* Button 4 */
		#btn4:hover {
			animation: grow 0.5s infinite;
		}
		
		/* Button 5 */
		#btn5:hover {
			animation: rotate 0.5s infinite;
		}
		
		/* Button 6 */
		#btn6:hover {
			animation: move 0.5s infinite;
		}
		
		/* Button 7 */
		#btn7:hover {
			animation: shake 0.5s infinite;
		}
		
		/* Button 8 */
		#btn8:hover {
			animation: fade 0.5s infinite;
		}
		
		/* Button 9 */
		#btn9:hover {
			animation: bounce 0.5s infinite;
		}
		
		/* Button 10 */
		#btn10:hover {
			animation: wave 0.5s infinite;
		}
		
		/* Animation for Button 1 */
		@keyframes pulse {
			0% {transform: scale(1);}
			50% {transform: scale(1.1);}
			100% {transform: scale(1);}
		}
		
		/* Animation for Button 2 */
		@keyframes spin {
			0% {transform: rotate(0deg);}
			100% {transform: rotate(360deg);}
		}
		
		/* Animation for Button 3 */
		@keyframes color-change {
			0% {background-color: #4CAF50;}
			50% {background-color: #FFC107;}
			100% {background-color: #4CAF50;}
		}
		
		/* Animation for Button 4 */
		@keyframes grow {
			0% {transform: scale(1);}
			100% {transform: scale(1.5);}
		}
		
		/* Animation for Button 5 */
		@keyframes rotate {
			0% {transform: rotate(0deg);}
			100% {transform: rotate(360deg);}
		}
		
		/* Animation for Button 6 */
		@keyframes move {
			0% {transform: translate(0, 0);}
			50% {transform: translate(10px, 0);}
			100% {transform

오늘 다룰 버튼 CSS 코드

바로 애니메이션 효과! PC에서 마우스를 해당 버튼 위에 올려놔야 작동합니다 :)

 

btn1 CSS [펄스]

btn2 CSS [회전]

btn3 CSS [색상변경]

btn4 CSS [강조]

btn5 CSS [회전2]

btn6 CSS [좌우 움직임]