Histórico da Página

HTML
<div> <img src="https://tdn.totvs.com/download/attachments/725739021/capa-release-notes2w.png?version=1&modificationDate=1673218362722&api=v2" alt=""> </div>

HTML
<style> img { max-width: 100%; } </style>

HTML

 <div style="text-align:center"><h1>O QUE HÁ DE NOVO NO TOTVS CRM?</h1>
<h5>Estamos extremamente entusiasmados com este ano aqui na TOTVS CRM - Gestão de Clientes, pois continuamos aprimorando nossa plataforma para garantir que você e sua equipe possam trabalhar da maneira mais eficiente possível.  Neste ambiente, você poderá encontrar novos recursos, melhorias e manutenção que lançamos mês a mês em 2023. Vamos lá?</h5></div>

<div class="frame">
<a href="#"> <button class="custom-btn btn-3"><span>JANEIRO</span></button></a>
	   <a href="#"> <button class="custom-btn btn-3"><span>FEVEREIRO</span></button></a>
			    <a href="#"><button class="custom-btn btn-3"><span>MARÇO</span></button></a>
				    <a href="#"> <button class="custom-btn btn-3"><span>ABRIL</span></button></a>
						    <a href="#"><button class="custom-btn btn-3"><span>MAIO</span></button></a>
							     <a href="#"><button class="custom-btn btn-3"><span>JUNHO</span></button></a>
									 <a href="#"> <button class="custom-btn btn-3"><span>JULHO</span></button></a>
	   <a href="#"> <button class="custom-btn btn-3"><span>AGOSTO</span></button></a>
			    <a href="#"><button class="custom-btn btn-3"><span>SETEMBRO</span></button></a>
				    <a href="#"> <button class="custom-btn btn-3"><span>OUTUBRO</span></button></a>
						    <a href="#"><button class="custom-btn btn-3"><span>NOVEMBRO</span></button></a>
							     <a href="#"><button class="custom-btn btn-3"><span>DEZEMBRO</span></button></a>
 
 
</div>

HTML

<style>

 #title-text {
	display: none !important;}  
 

 body {
  background: #e0e5ec;
}
h1 {
  position: relative;
  text-align: center;
  color: #353535;
  font-size: 50px;
  font-family: "Cormorant Garamond", serif;
}

p {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  text-align: center;
  font-size: 18px;
  color: #676767;
}
.frame {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

/* 3 */
.btn-3 {
  background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
  
}
.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
   background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.btn-3:before {
  height: 0%;
  width: 2px;
}
.btn-3:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover{
   background: transparent;
  box-shadow: none;
}
.btn-3:hover:before {
  height: 100%;
}
.btn-3:hover:after {
  width: 100%;
}
.btn-3 span:hover{
   color: rgba(2,126,251,1);
}
.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
   background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.btn-3 span:before {
  width: 2px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 2px;
}
.btn-3 span:hover:before {
  height: 100%;
}
.btn-3 span:hover:after {
  width: 100%;
}

</style>

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 95

Nova versão 96

Chave