Pomocí CSS kódu lze textový odkaz na plné znění článku formátovat do podoby jednoduchého tlačítka.



Následující kód vložte do paletky Page Inspector / Header / CSS:

.blog-read-more a:link {
margin: 8px;    
padding: 2px;
    text-decoration: none;
    color: white!important;
    background: #919191;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #5D5D5D;}

.blog-read-more a:hover {background: #5D5D5D;}

.blog-read-more a:active {
    background: #5D5D5D;
    border: 1px solid #5D5D5D;}

V kódu můžete ovlivnit tyto hodnoty:

• na 2. řádku - odsazení tlačítka od okolního textu
• na 3. řádku - odsazení hran tlačítka od textu, který je uvnitř
• na 6. řádku - barva plochy tlačítka v klidovém stavu
• na 9. řádku - síla a barva rámečku v klidovém stavu
• na 11. řádku - barva plochy tlačítka při najetí myší
• na 14. řádku - barva plochy tlačítka při kliknutí myší
• na 15. řádku - síla a barva rámečku při kliknutí myší

Ještě několik poznámek na závěr:

• barvy se zadávají v hexadecimálním kódu, práci si můžete usnadnit pomocí Hex Color Picker
• pokud vkládáte na konec Summary enter, aby tlačítko bylo vždy na novém řádku, nastavte hodnotu margin na 0
• pokud necháváte odkaz na celý článek přímo za textem na stejném řádku, je nutné mezi slova “Celý” a “článek” v tlačítku vložit nerozdělitelnou mezeru (v paletce Page Inspector / Page / General / Blog Permalinks)

tag: tlačítka, text, blog, CSS