프로그래밍/HTML+CSS

css 버튼 뾰족 효과

p-a-r-k 2016. 8. 18. 18:05
반응형



.search-box { }
.search-box li { float:left; }
.sch-name { width:200px; border:0; padding:6px 8px; }

button {
	overflow: visible;
	position: relative;
	float: right;
	border: 0;
	padding: 0;
	cursor: pointer;
	height: 30px;
	width: 50px;
	line-height: 30px;
	color: #fff;
	background: #d83c3c;
	border-radius: 0 3px 3px 0;
	text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}

button:before {
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 8px;
    left: -6px;
}
반응형