csteinlehner/ghost-button.html

## ghost-button.html
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
        body {
            margin: 50px;
        }

        .content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .cv-link-button {
            overflow-wrap: break-word;
            font: 400 19px "CV Source Sans", Helvetica, Arial, sans-serif;
            background: transparent;
            transition-property: all;
            transition-duration: .4s;
            transition-timing-function: ease;
            /* display: inline-block; */
            border-radius: 2px;
            cursor: pointer;
            vertical-align: middle;
            box-sizing: border-box;
            padding: 0 20px;
            white-space: nowrap;
            background-color: none;
            border: 1px solid transparent;
            color: #0094AA;
            text-align: center;
            text-decoration: none;
            font-family: "CV Source Sans", Helvetica, Arial, sans-serif;
            font-size: 17px;
            font-weight: 400;
            line-height: 43px;
            width: 260px;
            margin: 30px;
        }

        .ghost-1:hover {
            background-color: #E5F4F6;
        }
        .ghost-2:hover {
            text-decoration: underline;
        }
        .ghost-3:hover {
            border: 1px solid #9AD5E3;
        }
    </style>
</head>

<body>
    <div class="content">
        <a class="cv-link-button ghost-1" href="http://www.google.de" target="_blank">Button</a>
        <a class="cv-link-button ghost-2" href="http://www.google.de" target="_blank">Button</a>
        <a class="cv-link-button ghost-3" href="http://www.google.de" target="_blank">Button</a>
    </div>
</body>

</html>
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!-->
	<html class="no-js">
	<!--<![endif]-->

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="">
	<style>
	body {
	margin: 50px;
	}

	.content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	}

	.cv-link-button {
	overflow-wrap: break-word;
	font: 400 19px "CV Source Sans", Helvetica, Arial, sans-serif;
	background: transparent;
	transition-property: all;
	transition-duration: .4s;
	transition-timing-function: ease;
	/* display: inline-block; */
	border-radius: 2px;
	cursor: pointer;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 0 20px;
	white-space: nowrap;
	background-color: none;
	border: 1px solid transparent;
	color: #0094AA;
	text-align: center;
	text-decoration: none;
	font-family: "CV Source Sans", Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 43px;
	width: 260px;
	margin: 30px;
	}

	.ghost-1:hover {
	background-color: #E5F4F6;
	}
	.ghost-2:hover {
	text-decoration: underline;
	}
	.ghost-3:hover {
	border: 1px solid #9AD5E3;
	}
	</style>
	</head>

	<body>
	<div class="content">
	<a class="cv-link-button ghost-1" href="http://www.google.de" target="_blank">Button</a>
	<a class="cv-link-button ghost-2" href="http://www.google.de" target="_blank">Button</a>
	<a class="cv-link-button ghost-3" href="http://www.google.de" target="_blank">Button</a>
	</div>
	</body>

	</html>