Стиль кнопок css как на демо

220

24 марта 2017, 22:32

как сделать стиль кнопок как на демо этого сайта (перейдите по ссылке и там желтая кнопка чтобы посмотреть демо). На картинке айсберга две кнопки. Одна голубая и становится прозрачной при наведении, вторая прозрачная и становится голубой

Answer 1

Код напрямую с их сайта:

.inline *:last-child { 
    margin-right: 0; 
} 
.btn { 
    display: inline-block; 
    padding: 8px 18px 10px; 
    text-transform: uppercase; 
    border: 1px solid; 
} 
 
.btn, .btn.inverse:hover, a .icon, a.inverse:hover .icon { 
    color: #FFF; 
    background-color: #1C7AA8; 
    border-color: #1C7AA8; 
    transition: all .3s ease-in-out; 
} 
 
.nospace { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.btn:hover, .btn.inverse, a:hover .icon, a.inverse .icon { 
    color: inherit; 
    background-color: transparent; 
    border-color: inherit; 
    transition: all .3s ease-in-out; 
}

<footer> 
<ul class="nospace inline pushright"> 
<li><a class="btn" href="http://www.os-templates.com/free-website-templates">Vitae suspendisse</a></li> 
<li><a class="btn inverse" href="http://www.os-templates.com/free-website-templates">Molestie semper</a></li> 
</ul> 
</footer>