Я достиг границ CSS? Кнопка для работы на всех устройствах

Question

Я перепроектирую сайт, чтобы он был доступен на всех устройствах. Основной элемент - это список кнопок, которые делают довольно легкую анимацию, но не могут заставить ее реагировать. Пожалуйста помоги.

Кнопки жить можно увидеть here (отключить видео нажмите в правом верхнем углу)

Деталь: 1.Title должен оставаться жесткими, так что не двигается вдоль границ (сделать так, ранее использовавшееся положение : absolute;) 2.on hover border expand внутрь + суживает, позволяет сказать 10px с левой и правой сторон. 3. Положение позиции слева, стрелка вправо. 4. Текст на меньших экранах должен сломаться, а граница будет жидкой.

Результат до сих пор: http://codepen.io/anon/pen/VvmWgM

Текст ломает тонкие и границы проходит вдоль нее, стрелка расположена справа. Круто. Кроме того, текст перемещается при наведении, а границы расширяются наружу. Стрелка не выровнена по вертикали.

Любые яркие идеи, как настроить кнопки, чтобы они выступали в качестве примера на живом сайте?

Спасибо заранее,

.container { 
    float: none; 
    margin-left: auto; 
    margin-right: auto; 

} 
.floatleft { 
    float:left; 
    margin-right:20px; 
} 
.floatright {float:right;} 
.clear {clear:both;} 

.button-wrap { 
    outline-style: solid; 
    outline-width:4px; 
    display:block;  
    padding:30px 20px; 
    transition: all .12s ease; 
} 
.button-wrap:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
a.project-title { 
    color:#000; 
    font-size: 36px; 
    font-weight: 400; 
    transition: all .4s ease; 
    display: block; 
    text-decoration:none; 
} 
.button-wrap:hover { 
    outline-width:6px; 
    margin:0 20px; 

} 
.button-wrap:hover a.project-title { 
    font-weight: 700; 
    transition: all .12s ease; 
} 
.arrow { 
transition: all .4s ease; 
margin-top: -4px; 
    margin-right:20px; 
    vertical-align:middle; 
} 
.button-wrap:hover .arrow { 
margin-right:0px; 
} 

Answer 1

я бросил что-то вместе для вас: http://codepen.io/woestijnrog/pen/YyNdQe.

Я начал с нуля, поэтому вам придется адаптировать то, что вы можете использовать. Для того, чтобы избежать махинаций с текстом оплавления я использовал

box-shadow 

и

text-shadow 

Кажется, для подтверждения ваших четырех правил.