티스토리 뷰
button.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.classname {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4080C0), color-stop(1, #1e62d0) );
border-top-left-radius:10px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
text-indent:0;
border:1px solid #337fed;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #40475F), color-stop(1, #40475F) );
background:-moz-linear-gradient( center top, #1e62d0 5%, #4080C0 100% );
}
</style>
</head>
<body>
<a href="#" class="classname">버튼</a>
</body>
</html>
'웹표준' 카테고리의 다른 글
| CSS 가변영역과 고정영역이 같이 있을 경우 (0) | 2019.04.24 |
|---|---|
| 테이블 자체를 중앙정렬(가운데) 하기 (0) | 2019.03.20 |
| html5 무료 기초 강의 사이트 (0) | 2015.06.30 |
| 부트 스트랩 한글 메뉴얼 링크 (0) | 2014.07.25 |
| HTML5 기본 양식. (0) | 2013.12.20 |