End of News-List
CODE
×
HTML
<div class='end-news-list'> <a class='email-abo' href='#'>News als E-Mail abonnieren</a> <a class='rss-abo' href='#'>News als RSS-Feed abonnieren</a> <button class='small'>Alle Meldungen</button> </div>
CSS
@media screen and (max-width: 767px) { div.end-news-list { margin-bottom: 80px; } } button.small { text-align:center; background-color: rgba(78,78,78,1); color: var(--white); font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; line-height: 125%; display: inline-block; height: 44px; border-radius: 44px; border: none; padding: 11px 38px; vertical-align: middle; margin: 15px 30px 15px 0; transition: all 250ms ease-in-out; cursor: pointer; } a.rss-abo { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgMzIwIj4NCiAgICA8ZyBmaWxsPSIjREQ2NjAwIj4NCiAgICAgIDxwYXRoIGQ9Ik0zMy40ODQsNzIuNGEzMy40ODUsMzMuNDg1LDAsMSwwLDMzLjc1LDMzLjQ4NEEzMy42ODYsMzMuNjg2LDAsMCwwLDMzLjQ4NCw3Mi40WiIgZGF0YS1uYW1lPSJQZmFkIDI4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNCAzMikgdHJhbnNsYXRlKDAgMTE0LjYzMikiLz4NCiAgICAgIDxwYXRoIGQ9Ik01LjU4MSwzNi40YTUuODU5LDUuODU5LDAsMCwwLTMuOTg2LDEuNTk0QTUuMzg0LDUuMzg0LDAsMCwwLDAsNDEuNzE1Vjg0Ljc2NUE1LjI3Niw1LjI3NiwwLDAsMCw1LjA0OSw5MC4wOGM1Ni42LDIuNjU3LDEwMS41MTQsNDcuMywxMDMuOTA2LDEwMy45MDZhNS4xMDksNS4xMDksMCwwLDAsNS4zMTUsNS4wNDloNDMuMDUxYTQuODI1LDQuODI1LDAsMCwwLDMuNzItMS41OTQsNi43MjEsNi43MjEsMCwwLDAsMS41OTQtMy45ODZjLTEuMDYzLTQxLjE5LTE4LjA3MS03OS45ODktNDcuMy0xMDkuNDg3QTE2Mi44LDE2Mi44LDAsMCwwLDUuNTgxLDM2LjRaIiBkYXRhLW5hbWU9IlBmYWQgMjkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0IDMyKSB0cmFuc2xhdGUoMCA1NC45NjUpIi8+DQogICAgICA8cGF0aCBkPSJNMTc5LjY0Niw3NC40M0MxMzIuODUsMjcuODQ2LDcwLjk3NCwxLjMsNS40NiwwYTUuMjg4LDUuMjg4LDAsMCwwLTMuOSwxLjU2MUE2LjU0Miw2LjU0MiwwLDAsMCwwLDUuMnY0Mi4xNmE1LjIxOCw1LjIxOCwwLDAsMCw1LjIsNS4yYzEwNS41NTIsMi42LDE5My42ODUsOTAuODI2LDE5Ni4yODUsMTk2LjQ4NmE1LDUsMCwwLDAsNS4yLDQuOTQ1SDI0OC44YTQuNzE4LDQuNzE4LDAsMCwwLDMuNjQtMS41NjFBNS4xNDEsNS4xNDEsMCwwLDAsMjU0LDI0OC44LDI1My45NzYsMjUzLjk3NiwwLDAsMCwxNzkuNjQ2LDc0LjQzWiIgZGF0YS1uYW1lPSJQZmFkIDMwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNCAzMikgdHJhbnNsYXRlKDApIi8+DQogICAgPC9nPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: right center; background-size: 30px 30px; text-align:right; font-size: 14px; line-height: 18px; line-height: 125%; font-family: 'Roboto'; font-style: normal; font-weight: 400; display:inline-block; text-decoration:none; color: rgba(112,112,112,1); padding-top: 8px; padding-right: 42px; padding-bottom: 8px; padding-left: 0px; } a.email-abo { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgMzIwIj4NCiAgICA8ZyBmaWxsPSIjREQ2NjAwIj4NCiAgICAgIDxwYXRoIGQ9Ik04Ljc1LDE3LjYxMnY1NS42YTguOTg4LDguOTg4LDAsMCwwLDE2LjIzMyw1LjMyM0w1Ny41MDgsMzQuMjc2WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMgMjIpIHRyYW5zbGF0ZSg5Ni4xNTIgMTkzLjUzNCkiLz4NCiAgICAgIDxwYXRoIGQ9Ik0yODMuOTUzLDEuNjY3YTksOSwwLDAsMC05LjM3NS0uNjQ3TDQuODMyLDE0MS44ODhhOSw5LDAsMCwwLDEuMjQ3LDE2LjQ4NEw4MS4wNjgsMTg0LDI0MC43Nyw0Ny40NTIsMTE3LjE5LDE5Ni4zNCwyNDIuODY4LDIzOS4zYTkuMiw5LjIsMCwwLDAsMi45LjQ4LDguOTg0LDguOTg0LDAsMCwwLDguOS03LjY2MUwyODcuNjM0LDEwLjMyM2E5LjAwNyw5LjAwNywwLDAsMC0zLjY4MS04LjY1NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzIDIyKSB0cmFuc2xhdGUoMCAwKSIvPg0KICAgIDwvZz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: left center; background-size: 30px 30px; text-align:right; font-size: 14px; line-height: 18px; line-height: 125%; font-family: 'Roboto'; font-style: normal; font-weight: 400; display:inline-block; text-decoration:none; color: rgba(112,112,112,1); padding-top: 8px; padding-bottom: 8px; padding-left: 42px; } div.end-news-list > a.rss-abo { display: inline-block; position: relative; float: right; right: 15px; } div.end-news-list > button.small { display: block; margin-top: 32px; } button.small:hover, button.small:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } a.rss-abo:hover, a.rss-abo:focus { color: var(--black); } a.email-abo:hover, a.email-abo:focus { color: var(--black); } div.end-news-list > button.small:hover, div.end-news-list > button.small:focus { background-color: #404040; } @media screen and (max-width: 767px) { a.rss-abo { text-align:left; background-position: left center; padding-top: 8px; padding-right: 0px; padding-bottom: 8px; padding-left: 42px; } a.email-abo { text-align:left; padding-right: 0px; } div.end-news-list > a.email-abo { display: block; margin-bottom: 16px; } div.end-news-list > a.rss-abo { float: none; right: 0; } div.end-news-list > button.small { -webkit-transform: scale(1) !important; -ms-transform: scale(1) !important; transform: scale(1) !important; } } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
End of News-List
Erstellt: 12.12.2019 - 20:32 Uhr
Letzte Änderung: 21.04.2023 - 14:16 Uhr
×
News als E-Mail abonnieren
News als RSS-Feed abonnieren
Alle Meldungen