How to change read more > onto button?

michkocis

MD customer
Messages
30
Reaction score
10
Guys 1
Could you help me with this one, please?

how I change read more into a button? I mean in a loop of my blog:sneaky:
I am trying to get this orange button
 

Attachments

Alex

MD developer
Messages
4,883
Reaction score
1,138
Hi Mich. :D

Which loop is your blog using? Out of the box only the Block Blocks template uses a button for the read more link.
 

michkocis

MD customer
Messages
30
Reaction score
10
Hi Mich. :D

Which loop is your blog using? Out of the box, only the Block Blocks template uses a button for the read more link.
I love you man, what you created, I am still mindblown about MD5.1 and playing with 1,, baby project, day night.

Let me clarify... Simple, default one, original one - old school what was in older MD :) Looks like this

I want a button like cryptowp.com, hmmm

Any idea? ;) ( i can promise so far everything s good, that's my only appearance issue
 

Attachments

Maikel

MD support
Messages
162
Reaction score
76
The read more always use a specific class (.more-link), so you can add CSS to make it a button.
I don't know what your button looks like on your website, so in the code i mention i just use the MD default. You can change the color on the first line.

CSS:
.format .more-link {
    background-color: #22A340;
    border: 0;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    display: inline-block;
    font-style: normal;
    font-weight: bold;
    padding: 17px 28px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    z-index: 10;
    -webkit-appearance: none;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
If you want to create an hover effect, for example a different background-color, you can add CSS to the .format .more-link:hover class.

CSS:
.format .more-link:hover {
    background-color: red;
}
 

michkocis

MD customer
Messages
30
Reaction score
10
The read more always use a specific class (.more-link), so you can add CSS to make it a button.
I don't know what your button looks like on your website, so in the code i mention i just use the MD default. You can change the color on the first line.
Hi Maikel,
Thanks so much, it worked so far! Just like yesterday`s advise ;)

I don't wanna be annoying. But! I really would like to have the same ( arrow orange button ) with that hover effect of going down a bit...

If you could generate me code like this, well i already owe you but now me vs you 0:2

Thank you my friend
 

Maikel

MD support
Messages
162
Reaction score
76
Let's finish it and make it three. :)

The arrow is an icon within MD, So we need to put content and the font-family in css. I also use the same transition times like cryptowp.com To get the same arrow + hover arrow effect, you can use the following code.

CSS:
.format .more-link::after {
    content: '\e80f';
    display: inline-block;
    font-family: 'md-icon';
    font-size: 16px;
    margin-left: 13px;
    position: relative;
    top: -3px;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.format .more-link:hover:after {
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
}
You also want it to go down a bit. You can use the following code for that:

CSS:
.format .more-link:hover {
    -moz-transform: translateY(1px);
    -ms-transform: translateY(1px);
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}
If you also need the colors that cryptowp uses. The orange button has the color #f58f2a and the hover color code is: #EB8928. You can add this as background-color. in the code mentioned in my previous post.
 

Alex

MD developer
Messages
4,883
Reaction score
1,138
I had considered the option to turn the read more link into a button when developing MD5.1 and decided to save that as an enhancement for later since it can be "solved" with CSS (see @Maikel's helpful answers). Will keep this in mind for the future.
 

michkocis

MD customer
Messages
30
Reaction score
10
Alex! Thank you, ultimately for bringing MD5 out, I love the blog loop system - my favorite feature :love:

Maikel thank you very much for that piece of code, it worked flawlessly.
 

Attachments

Top