Seleccionar página

Botonera

por | Oct 10, 2018 | html

Una página con una botonera (vemos el html)

</pre>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv= "Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>

<!-- header -->
<h1>Herman webs</h1>

<!-- start the realm of the buttons -->
<div id="buttons">
<a href="#" class="btn blue">Hermanmusic</a>
<a href="#" class="btn green">Herman code</a>
<a href="#" class="btn red">Promoción editorial</a>
<a href="#" class="btn purple">Inmobiliaria</a>
<a href="#" class="btn orange">Portfolio</a>
<a href="#" class="btn yellow">Centro estética</a>
</div>

<!-- Copyright stuffs -->
<p>Copyright&copy 2018 <a href="http://www.benngagne.ca" target="_blank" class="link">benn</a></p>

</body>
</html>
<pre>

Vemos el css

</pre>
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* set global font to Open Sans */
body {
font-family: 'Open Sans', 'sans-serif';
background-image: url(http://benague.ca/files/pw_pattern.png);
}

/* header */
h1 {
color: #55acee;
text-align: center;
}

/* header/copyright link */
.link {
text-decoration: none;
color: #55acee;
border-bottom: 2px dotted #55acee;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto;
}

.link:hover {
color: #2ecc71;
border-bottom: 2px dotted #2ecc71;
}

/* button div */
#buttons {
padding-top: 50px;
text-align: center;
}

/* start da css for da buttons */
.btn {
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}

.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}

.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}

.blue:hover {
background-color: #6FC6FF;
}

.green {
background-color: #2ecc71;
box-shadow: 0px 5px 0px 0px #15B358;
}

.green:hover {
background-color: #48E68B;
}

.red {
background-color: #e74c3c;
box-shadow: 0px 5px 0px 0px #CE3323;
}

.red:hover {
background-color: #FF6656;
}

.purple {
background-color: #9b59b6;
box-shadow: 0px 5px 0px 0px #82409D;
}

.purple:hover {
background-color: #B573D0;
}

.orange {
background-color: #e67e22;
box-shadow: 0px 5px 0px 0px #CD6509;
}

.orange:hover {
background-color: #FF983C;
}

.yellow {
background-color: #f1c40f;
box-shadow: 0px 5px 0px 0px #D8AB00;
}

.yellow:hover {
background-color: #FFDE29;
}

/* copyright stuffs.. */
p {
text-align: center;
color: #55acee;
padding-top: 20px;
}
<pre>